获取 iframe 的文档对象
Posted
技术标签:
【中文标题】获取 iframe 的文档对象【英文标题】：Getting the document object of an iframe 【发布时间】：2011-11-26 02:18:57 【问题描述】：我正在尝试，但我搜索的示例似乎都没有帮助。我的代码如下所示：
<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" onload="myFync()"></iframe>
</body>
</html>
我已经测试了我能够获取 iframe 对象，但是 .document 不起作用， .contentDocument 也不起作用，我想我也测试了一些其他选项，但它们都返回未定义的，甚至是示例应该工作，但他们不为我工作。所以我已经有了 iframe 对象，现在我想要的只是它的文档对象。我在 Firefox 和 Chrome 上对此进行了测试，但无济于事。
【问题讨论】：
您只需要突出显示您的标记并单击看起来像试试下面的
var doc=document.getElementById("frame").contentDocument;
// Earlier versions of IE or IE8+ where !DOCTYPE is not specified
var doc=document.getElementById("frame").contentWindow.document;
注意：AndyE 指出所有主流浏览器都支持contentWindow，所以这可能是最好的选择。
注意2：在此示例中，您将无法通过任何方式访问该文档。原因是您无法访问具有不同来源的 iframe 的文档，因为它违反了“同源”安全策略
http://javascript.info/tutorial/same-origin-security-policy【讨论】：
AFAIK，所有浏览器都支持非标准的contentWindow 属性，所以使用它是最安全的。
@AndyE 我能找到的文档没有给出明确的是/否。你有什么我可以参考的吗？
@DudeDawg 您在这里遇到了同源违规。您无法访问来自不同域的 iframe 的 document
@Andy E, @JaredPar：我认为是不支持contentWindow 但支持contentDocument 的旧版（3.0 之前）版本的Safari。 contentDocument 早在 contentWindow （DOM 2 与 HTML5）之前就已成为标准，所以我过去喜欢它，但现在 contentWindow 单独使用非常安全。
有没有办法在 2014 年和所有现代浏览器中做到这一点？【参考方案2】：
这是我使用的代码：
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 与 contentDocument
IE (Win) 和 Mozilla (1.7) 将在 带有 oIFrame.contentWindow 的 iframe。 Safari (1.2.4) 不理解该属性，但确实有 oIframe.contentDocument，指向里面的文档对象 iframe。 为了使它更复杂，Opera 7 使用 oIframe.contentDocument，但它指向的是window对象 框架。因为Safari没有办法直接访问window对象 通过标准 DOM（或者是吗？）的 iframe 元素，我们完全 现代跨浏览器兼容的代码将只能访问 iframe 中的文档。
【讨论】：
【参考方案3】：为了更加稳健：
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;
和
...
var el = document.getElementById('targetFrame');
var frame_win = getIframeWindow(el);
if (frame_win)
frame_win.targetFunction();
...
...
【讨论】：
【参考方案4】：就我而言，这是由于同源政策。为了进一步解释，MDN 声明如下：
如果 iframe 和 iframe 的父文档同源，则返回一个 Document（即内联框架的嵌套浏览上下文中的活动文档），否则返回 null。
【讨论】：
以上是关于获取 iframe 的文档对象的主要内容，如果未能解决你的问题，请参考以下文章
如何在从父窗口创建的 iframe 的 onload 处理程序中获取对 iframe 窗口对象的引用