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

When does a web browser request the src content of a dynamically created iframe?

本文关键字：iframe src 内容 创建 动态 浏览器 何时 请求 Web      更新时间：2023-09-26

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

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

规范指出：

首次将iframe元素插入文档时， 用户代理必须创建嵌套的浏览上下文，然后 首次处理iframe属性。

使用以下代码片段和本地服务器，我在许多浏览器中测试了该行为。 
var f = document.createElement('iframe');
f.src = '/?';

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

  • IE 6 - 9
  • FF 3.6 - 12.0
  • 铬 1 - 18
  • 歌剧 10.00 - 12.00
  • 野生动物园 4.0 - 5.1.5

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

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

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

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

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

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

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

相关文章：