129

How can I access the content of an iframe with jQuery? I tried doing this, but it wouldn't work:

iframe content: <div id="myContent"></div>

jQuery: $("#myiframe").find("#myContent")

How can I access myContent?

Similar to jquery/javascript: accessing contents of an iframe but the accepted answer is not what I was looking for.

Community
  • 1
  • 1
mbillard
  • 38,386
  • 18
  • 74
  • 98
  • I just found that the built-in $ variable in Firefox console does not look like a complete jQuery at all. (I figured this after realizing that I do not have the jQuery variable either, then figuring that I did not load jQuery's source code). – eel ghEEz May 09 '17 at 15:12

3 Answers3

241

You have to use the contents() method:

$("#myiframe").contents().find("#myContent")

Source: https://web.archive.org/web/20180608003357/http://simple.procoding.net/2008/03/21/how-to-access-iframe-in-jquery/

API Doc: https://api.jquery.com/contents/

Nate Anderson
  • 18,334
  • 18
  • 100
  • 135
mbillard
  • 38,386
  • 18
  • 74
  • 98
  • 3
    give me error: Error: Permission denied to access property 'ownerDocument' – Imran Khan Apr 17 '13 at 10:19
  • 28
    ime: Its probably giving you error because of following reasons: 1) Iframe doesn't belong to same domain. 2) You are trying to read it before Iframe load event. – iMatoria Jul 05 '13 at 10:02
  • 1
    Is there a way to verify if the iframe content is from the same domain, prior to trying to access it and getting an error? – Kamafeather Aug 05 '16 at 09:18
  • 2
    The source url is broken. – karthzDIGI Jan 04 '17 at 07:19
  • @iMatoria What to do for the 1 reasson? – jperezmartin May 18 '17 at 18:57
  • 1
    @jperezmartin: You will have to use some javascript library that will transfer information between main page and iframe. Basically its been denied by browser because of Cross Browser functionality. I am sorry, I am not aware of any such library because I never required it. – iMatoria May 20 '17 at 08:35
  • @mbillard I am loading iframe with src so how can I access the contents as it is not having neither innerHTML nor innerText. both contains src values but not the actual page – shv22 Jun 02 '17 at 14:40
  • Is this possible if the iframe has sandbox attribute with `allow-script`? – LP13 Mar 13 '23 at 21:28
  • Related https://stackoverflow.com/a/1639342/1175496 – Nate Anderson Apr 11 '23 at 21:21
24
<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>
andres descalzo
  • 14,887
  • 13
  • 64
  • 115
17

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');
fireb86
  • 1,723
  • 21
  • 35