How to access the content of an iframe with jQuery?
You have to use the contents() method:
$("#myiframe").contents().find("#myContent")Source: http://simple.procoding.net/2008/03/21/how-to-access-iframe-in-jquery/
API Doc: https://api.jquery.com/contents/
<html><head><title></title><script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js"></script><script type="text/javascript">$(function() { //here you have the control over the body of the iframe document var iBody = $("#iView").contents().find("body"); //here you have the control over any element (#myContent) var myContent = iBody.find("#myContent");});</script></head><body> <iframe src="mifile.html" id="iView" style="width:200px;height:70px;border:dotted 1px red" frameborder="0"></iframe></body></html>
If iframe's source is an external domain, browsers will hide the iframe contents (Same Origin Policy).A workaround is saving the external contents in a file, for example (in PHP):
<?php $contents = file_get_contents($external_url); $res = file_put_contents($filename, $contents);?>then, get the new file content (string) and parse it to html, for example (in jquery):
$.get(file_url, function(string){ var html = $.parseHTML(string); var contents = $(html).contents();},'html');