Question

我创建了一个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);

由于body为null 而导致Internet Explorer 6-10失败。 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中的机制或逻辑是什么？有适当的解决方法吗？

以上测试以标准模式运行，没有其他错误。

Answer 1

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

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

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

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

在IE中访问友好的iframe内容

1 个答案: