获取 iframe 的文档对象答案

【问题标题】：Getting the document object of an iframe获取 iframe 的文档对象
【发布时间】：2011-11-26 02:18:57
【问题描述】：

我正在尝试获取 iframe 的文档对象，但我搜索的示例似乎都没有帮助。我的代码如下所示：

<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>

我已经测试了我能够获取 iframe 对象，但是 .document 不起作用， .contentDocument 也不起作用，我想我也测试了一些其他选项，但它们都返回未定义的，甚至是示例应该工作，但他们不为我工作。所以我已经有了 iframe 对象，现在我想要的只是它的文档对象。我在 Firefox 和 Chrome 上对此进行了测试，但无济于事。

【问题讨论】：

您只需要突出显示您的标记并单击看起来像{} 的按钮将其缩进为代码。我已编辑您的帖子以使其更清晰。
HTML: Getting document from IFrame 和 Invoking javascript in iframe from parent page 的副本。
@Jamiec，谢谢！我以为我必须为每一行点击 {}
@Andy E，我知道这是重复的，但其他示例对我不起作用。

标签： javascript dom iframe

【解决方案1】：

试试下面的

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，所以这可能是最好的选择。

http://help.dottoro.com/ljctglqj.php

注意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。

【讨论】：