Getting the document object of an iframe
JavascriptDomIframeJavascript Problem Overview
I'm trying to get the document object of an iframe, but none of the examples I've googled seem to help. My code looks like this:
<html>
<head>
<script>
function myFunc(){
alert("I'm getting this far");
var doc=document.getElementById("frame").document;
alert("document is undefined: "+doc);
}
</script>
</head>
<body>
<iframe src="http://www.google.com/ncr" id="frame" width="100%" height="100%" onload="myFync()"></iframe>
</body>
</html>
I have tested that I am able to obtain the iframe object, but .document doesn't work, neither does .contentDocument and I think I've tested some other options too, but all of them return undefined, even examples that are supposed to have worked but they don't work for me. So I already have the iframe object, now all I want is it's document object. I have tested this on Firefox and Chrome to no avail.
Javascript Solutions
Solution 1 - Javascript
Try the following
var doc=document.getElementById("frame").contentDocument;
// Earlier versions of IE or IE8+ where !DOCTYPE is not specified
var doc=document.getElementById("frame").contentWindow.document;
Note: AndyE pointed out that contentWindow is supported by all major browsers so this may be the best way to go.
Note2: In this sample you won't be able to access the document via any means. The reason is you can't access the document of an iframe with a different origin because it violates the "Same Origin" security policy
Solution 2 - Javascript
This is the code I use:
var ifrm = document.getElementById('myFrame');
ifrm = (ifrm.contentWindow) ? ifrm.contentWindow : (ifrm.contentDocument.document) ? ifrm.contentDocument.document : ifrm.contentDocument;
ifrm.document.open();
ifrm.document.write('Hello World!');
ifrm.document.close();
> contentWindow vs. contentDocument > > - IE (Win) and Mozilla (1.7) will return the window object inside the > iframe with oIFrame.contentWindow. > - Safari (1.2.4) doesn't understand that property, but does have > oIframe.contentDocument, which points to the document object inside > the iframe. > - To make it even more complicated, Opera 7 uses > oIframe.contentDocument, but it points to the window object of the > iframe. Because Safari has no way to directly access the window object > of an iframe element via standard DOM (or does it?), our fully > modern-cross-browser-compatible code will only be able to access the > document within the iframe.
Solution 3 - Javascript
For even more robustness:
function getIframeWindow(iframe_object) {
var doc;
if (iframe_object.contentWindow) {
return iframe_object.contentWindow;
}
if (iframe_object.window) {
return iframe_object.window;
}
if (!doc && iframe_object.contentDocument) {
doc = iframe_object.contentDocument;
}
if (!doc && iframe_object.document) {
doc = iframe_object.document;
}
if (doc && doc.defaultView) {
return doc.defaultView;
}
if (doc && doc.parentWindow) {
return doc.parentWindow;
}
return undefined;
}
and
...
var el = document.getElementById('targetFrame');
var frame_win = getIframeWindow(el);
if (frame_win) {
frame_win.targetFunction();
...
}
...
Solution 4 - Javascript
In my case, it was due to Same Origin policies. To explain it further, MDN states the following:
>If the iframe and the iframe's parent document are Same Origin, returns a Document (that is, the active document in the inline frame's nested browsing context), else returns null.