getElementById.contentDocument error in IE

StackOverflow https://stackoverflow.com/questions/1477547

Question 

<html>
   <script type="text/javascript">
      function func() {
         alert(document.getElementById('iView').contentDocument);
      }    
   </script>
   <body>
      <iframe id="iView" style="width:200px;height:200px;"></iframe>
      <a href="#" onclick="func();">click</a>
   </body>
</html>

After click, Firefox returns [object HTMLDocument]. Internet Explorer returns undefined.

How can I select the iView element with Internet Explorer? Thanks.

Was it helpful?

Solution

From this page:

Mozilla supports the W3C standard of accessing iframe's document object through IFrameElm.contentDocument, while Internet Explorer requires you to access it through document.frames["name"] and then access the resulting document.

So you need to detect the browser and on IE do something like this instead:

document.frames['iView'].document;

OTHER TIPS

The cross-browser equivalent to contentDocument (including Firefox itself, where contentDocument does work) is contentWindow.document.

So try:

alert(document.getElementById('iView').contentWindow.document);

contentWindow gets you a reference to the iframe's window object, and of course .document is just the DOM Document object for the iframe.

Here's an article that summarizes better.

You seem to want to get the contents of the iframe right?

IE7 and FF2:

var iframe = document.getElementById('iView');
alert(iframe.contentWindow.document.body.innerHTML);

Use feature detection, as contentDocument is supported in IE 8:

var iframe = document.getElementById("iView");
var iframeDocument = null;
if (iframe.contentDocument) {
    iframeDocument = iframe.contentDocument;
} else if (iframe.contentWindow) {
    // for IE 5.5, 6 and 7:
    iframeDocument = iframe.contentWindow.document;
}
if (!!iframeDocument) {
    // do things with the iframe's document object
} else {
    // this browser doesn't seem to support the iframe document object
}

contentWindow.document.body.innerHTML

is working for me in Internet Explorer and Firefox, whereas

contentDocument.body.innerHTML

will only work in Firefox.

Do something like this:

var myFrame = document.getElementById('iView');
var frameDoc = myFrame.contentDocument || myFrame.contentWindow;

if (frameDoc.document){
  frameDoc = frameDoc.document;
}

alert(frameDoc);

See this page for more details

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top