Web 浏览器何时请求动态创建的 iframe 的 src 内容？

Posted 2023-03-05

【中文标题】Web 浏览器何时请求动态创建的 iframe 的 src 内容？

【英文标题】：When does a web browser request the src content of a dynamically created iframe?

【发布时间】：2012-05-14 08:09:50

【问题描述】：

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

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

【问题讨论】：

登录调试控制台可以轻松告诉你。

它不会告诉我我应该一直期待哪种行为。

【参考方案1】：

The specification 状态：

当iframe 元素是第一个inserted into a document 时， 用户代理必须创建一个nested browsing context，然后 第一次process the iframe attributes。

---

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

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

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

IE 6 - 9 FF 3.6 - 12.0 铬 1 - 18 歌剧 10.00 - 12.00 Safari 4.0 - 5.1.5

因此，只有将框架附加到文档后才会发送请求。

【讨论】：

这就是我所期望的。 :)

【参考方案2】：

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

【参考方案3】：

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

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

【参考方案4】：

根据我的经验，将节点添加到 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 中的“网络”选项卡以查看何时请求该页面。我相信只有在调用 appendChild 之后才会请求它。

【参考方案5】：

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

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