iframe problem using javascript

Question

Does anyone know how to get the HTML out of an IFRAME? I have tried several different ways:

document.getElementById('iframe01').contentDocument.body.innerHTML, document.frames['iframe01'].document.body.innerHTML, document.getElementById('iframe01').contentWindow.document.body.innerHTML, etc

but none of them worked.

I believe the reason they're not working is that the content of my iframe doesn't have a body tag (I'm loading XML). Any other way to get all the contents of the iframe? I am open to jQuery too.

This:

document.getElementById('iframe01').contentWindow.document.body.innerHTML

works fine in the IE, but this:

document.getElementById('iframe01').contentDocument.body.innerHTML

does not work for FF.

Do you need all the html? Or do you just need a sub-section? I guess what I'm trying to ask is, what are you doing with the innerHTML value? — smaglio81
– smaglio81, Commented Jan 28, 2010 at 6:24
i want the inner html content (which is an xml with xsl) and then display it in an ckeditor. — Arjun Singh
– Arjun Singh, Commented Jan 28, 2010 at 7:01
heres the sample of my innerhtml thru FF firebug : <result> <h1>Title</h1><div>Rest content</div> <div>Another Content</div> </result> — Arjun Singh
– Arjun Singh, Commented Jan 28, 2010 at 7:04

dyve · Accepted Answer · 2010-01-28 08:14:03Z

2

Since you tagged this jQuery, I assume you'd appreciate an answer in jQuery to get past the cross-browser issues.

$("#iframe01").contents()

will get you into the jQuery object for the contents of the iframe. You can work from there. Security issues may prevent you from getting the actual HTML content (you'll get an error like "permission denied to get property htmldocument").

Full sample code:

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script>
$(function() {
    $("#clickme").click(function() {
      alert($("#iframe01").contents().find("body").html());
      return false;
    });     
});
</script>
</head>
<body>
  <p id="hello">Hello World, there's an iframe below this. <a href="#" id="clickme">Click me!</a></p>
  <iframe id="iframe01" src="iframe_content.html"></iframe>
</body>
</html>

Note that you will have to load the iframe from the same domain and be sure the iframe has loaded before doing anything.

edited Jan 28, 2010 at 8:14

answered Jan 28, 2010 at 8:04

dyve

6,0632 gold badges32 silver badges44 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

dyve Over a year ago

iframe_content.html contains your example <result> <h1>Title</h1><div>Rest content</div> <div>Another Content</div> </result>

Yo Momma · Accepted Answer · 2010-01-28 06:09:28Z

0

I had a similar issue a while ago. Try using:

document.frames["iframe0"].contentWindow.document.body.innerHTML

That should work for both IE and FF

answered Jan 28, 2010 at 6:09

Yo Momma

8,8117 gold badges37 silver badges45 bronze badges

1 Comment

Arjun Singh Over a year ago

it works if only i have body tag within the iframe. but in mycase the body tag is not there because i am opening an xml with xsl in the iframe. it shows no body tag it shows one <result> tag which also i cant access

Collectives™ on Stack Overflow

iframe problem using javascript

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related