Javascript 获取 iframe 的文档对象
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7570496/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Getting the document object of an iframe
提问by Dude Dawg
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:
我正在尝试获取 iframe 的文档对象，但我在 google 上搜索的示例似乎都没有帮助。我的代码如下所示：
<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.
我已经测试我能够获得 iframe 对象，但是 .document 不起作用， .contentDocument 也不起作用，我想我也测试了一些其他选项，但它们都返回未定义的，甚至是应该的示例有工作，但他们不为我工作。所以我已经有了 iframe 对象，现在我想要的只是它的文档对象。我已经在 Firefox 和 Chrome 上对此进行了测试，但无济于事。
回答by JaredPar
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 contentWindowis supported by all major browsers so this may be the best way to go.
注意：AndyE 指出contentWindow所有主要浏览器都支持它，所以这可能是最好的方法。
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
注意 2：在此示例中，您将无法通过任何方式访问该文档。原因是您无法访问具有不同来源的 iframe 的文档，因为它违反了“同源”安全策略
回答by James Hill
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.
contentWindow 与 contentDocument
- IE (Win) 和 Mozilla (1.7) 将使用 oIFrame.contentWindow 返回 iframe 内的窗口对象。
- Safari (1.2.4) 不理解该属性，但确实有 oIframe.contentDocument，它指向 iframe 内的文档对象。
- 更复杂的是，Opera 7 使用了 oIframe.contentDocument，但它指向 iframe 的 window 对象。因为 Safari 无法通过标准 DOM 直接访问 iframe 元素的 window 对象（或者可以吗？），我们完全现代跨浏览器兼容的代码将只能访问 iframe 中的文档。
回答by Dominique Fortin
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();
...
}
...
