7

假设我使用 js 动态创建一个 iframe 节点，然后设置 src 属性 (1)，最后将该节点附加到 DOM (2)。

浏览器何时请求 src 内容？在（1）之后？在（2）之后？或者它是不可预测的？它取决于浏览器吗？

4

5 回答 5

5

该规范指出：

当一个iframe元素第一次插入到文档中时，用户代理必须创建一个嵌套的浏览上下文，然后 第一次处理iframe属性。

使用以下代码段和本地服务器，我已经在许多浏览器中测试了该行为。

var f = document.createElement('iframe');
f.src = '/?';

资源永远不会被获取（我只展示了最低和最高测试的浏览器版本）：

  • 即 6 - 9
  • 法拉盛 3.6 - 12.0
  • 铬 1 - 18
  • 歌剧 10.00 - 12.00
  • Safari 4.0 - 5.1.5

因此，仅在将框架附加到文档后才发送请求。

于 2012-05-04T19:20:06.493 回答
1

(2) 之后。在此之前，它只是 JS。在它附加到 DOM 之前，浏览器不会对其进行操作。

于 2012-05-04T19:16:43.120 回答
0

好吧，我不会为您测试每个浏览器，但我总是希望具有 src 和 href 属性的元素链接到或加载某种内容，在它们实际附加后总是加载，因为何时/何地 iframe 或js 文件落在文档中，涉及大量安全性和一般实现问题。对于浏览器供应商而言，以任何其他方式做到这一点将是严重的失败，我可以看到一个事实，即 chrome 通过一些实验就可以做到这一点。

我能想到的唯一例外是可以在插入之前加载的图像。

于 2012-05-04T19:17:42.217 回答
0

以我的经验，它总是在将节点添加到 DOM 时。您可以加载 Firebug 或其他一些开发控制台，并查看何时发生这种情况。抛出几个警报来确定这样的时间：

<script type="text/javascript">
    ifrm = document.createElement("IFRAME"); 
    ifrm.setAttribute("src", "http://blah.com/");
    alert('SRC SET'); 
    ifrm.style.width = 640+"px"; 
    ifrm.style.height = 480+"px"; 
    document.body.appendChild(ifrm);
    alert('ADDED TO DOM');
</script>

运行类似的东西并观察 Firebug 中的“Net”选项卡以查看何时请求该页面。我相信只有在调用 appendChild 之后才会请求它。

于 2012-05-04T19:18:49.303 回答
0

（2）之后！！看看这个：http: //jsfiddle.net/lbstr/td7DD/

打开 firebug 或 chrome 的控制台并查看 net 选项卡。你会看到谷歌加载。然后，注释掉第三行并再次运行。你不会看到谷歌加载。

于 2012-05-04T19:19:54.837 回答