Question

我有这个HTML代码：

<html>
  <head>
    <script type="text/javascript">
      function GetDoc(x)
      {
        return x.document ||
          x.contentDocument ||
          x.contentWindow.document;
      }

      function DoStuff()
      {
        var fr = document.all["myframe"];
        while(fr.ariaBusy) { }
        var doc = GetDoc(fr);
        if (doc == document)
          alert("Bad");
        else 
          alert("Good");
      }
    </script>
  </head>
  <body>
    <iframe id="myframe" src="http://example.com" width="100%" height="100%" onload="DoStuff()"></iframe>
  </body>
</html>

问题是我收到消息“Bad”。这意味着iframe的文档没有正确获取，GetDoc函数返回的实际内容是父文档。

如果你告诉我哪里犯了我的错误，我会很感激。（我希望在IFrame中托管文档。）

谢谢。

Answer 1

您应该能够使用以下代码访问IFRAME中的文档：

document.getElementById('myframe').contentWindow.document

但是，如果框架中的页面是从其他域（例如google.com）加载的，则无法执行此操作。这是因为浏览器的Same Origin Policy。

Answer 2

问题是在IE中（我认为你正在测试），<iframe>元素有一个document属性引用包含iframe的文档，这就是在contentDocument或contentWindow.document属性之前使用。你需要的是：

function GetDoc(x) {
    return x.contentDocument || x.contentWindow.document;
}

此外，document.all并非在所有浏览器中都可用，而且是非标准的。请改用document.getElementById()。

Answer 3

如果您遇到跨域错误：

如果您可以控制iframe的内容-也就是说，如果它仅以跨域设置（例如在Amazon Mechanical Turk上）加载-您可以使用<body onload='my_func(my_arg)'>属性为内部html。

例如，对于内部html，请使用this html参数（是-已定义this，它指向内部body元素的父窗口）：

<body onload='changeForm(this)'>

在内部html中：

    function changeForm(window) {
        console.log('inner window loaded: do whatever you want with the inner html');
        window.document.getElementById('mturk_form').style.display = 'none';
    </script>

从主文档中的JavaScript获取IFrame的文档

3 个答案: