在 IE 中访问友好的 iframe 内容答案

【问题标题】：Accessing friendly iframe contents in IE在 IE 中访问友好的 iframe 内容
【发布时间】：2013-01-11 21:57:01
【问题描述】：

我创建了一个friendly iframe（同一个域）并使用 JavaScript 将其添加到 DOM。它在我的页面上可见。检查 HTML 如下所示：

<iframe id="test_frame" frameSpacing="0" height="100" src="javascript:window['contents']" width="100" name="test_frame">
  <!DOCTYPE html>
  <html>
    <head>
      <title>test_frame</title>
      <base target=_top>
    </head>
    <body style="margin: 0px; padding: 0px">
      <p>Hello World</p>
    </body>
  </html>
</iframe>

然后我运行以下命令以访问 iframe 的 <body> 中的标记：

    alert(window.frames["test_frame"].document.body.innerHTML);

对于 Internet Explorer 6-10 失败，因为 body 是 null。 iframe 的 document 对象存在，但似乎没有可读属性。其他浏览器只显示字符串<p>Hello World</p>。

但有趣的是，以下内容适用于 IE 6-10 和所有其他浏览器：

    window.setTimeout(function(){
      alert(window.frames["test_frame"].document.body.innerHTML);
    }, 1);

据我所知，setTimeout 在全局范围内执行传递的函数。所以我尝试使用call，但它确实不工作：

    (function(){
      alert(window.frames["test_frame"].document.body.innerHTML);
    }).call(window);

我见过类似的情况，在 setTimeout 中包装代码可以解决 IE iframe 问题。 IE 背后的机制或逻辑是什么？是否有适当的解决方法？

以上测试是在标准模式下运行的，除了所述之外没有其他错误。

【问题讨论】：

什么时候调用这个方法？内容可能尚未加载。

标签： javascript internet-explorer iframe

【解决方案1】：

IE 背后的机制或逻辑是什么？有合适的解决方法吗？

机制非常简单：等待一毫秒（实际上是四毫秒），然后尝试访问 iFrame。

时间就是一切。如果你调用得太快，你会看到一个空的 iFrame。 即使src 是 javascript 代码，你也必须让代码运行。

如果您在 DOM 中遇到 iFrame 后立即访问它：它很可能是空的。它尚未从互联网上获取。 即使src 是javascript:...，iFrame 也会为空。
如果您在页面加载后 1 毫秒执行此操作，则很可能它还没有被获取。但是，如果它在浏览器缓存中（通常不应该是一个页面）或者它是一个数据（或 javascript，在您的情况下）URL，那么这可能会起作用（尽管没有任何许可）。 document.body 元素此时可能已经存在 - 即使它将为空。
预期的工作流程是等待 iFrame load 事件。您可以在创建 iFrame 或设置其src 后安全地附加它。找到一组跨浏览器可靠地发送消息的事件是一个棘手的问题，但load 应该可以跨浏览器工作。
如果load 事件未能足够晚，请多等一毫秒。这应该不是必须的，但是 IE 中可能存在一个愚蠢的错误（我认为没有）。
如果您从控制台触发它，这应该是成功的。事实上，根据我的观察，情况一直如此。

【讨论】：