html页面动态引入iframe广告

最新推荐文章于 2023-07-13 14:14:43 发布

原创最新推荐文章于 2023-07-13 14:14:43 发布 · 2.6k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#iframe #onload

本文探讨了iframe在网页加载过程中的作用及影响，特别是其对主页面onload事件的阻塞问题。提出了通过动态脚本的方式将iframe的加载延后，以此来优化页面加载速度的方法。

Souders在他的blog里面有阐述：Using Iframes Sparingly:

iframe会阻塞主页面的onload事件
主页面和iframe共享同一个连接池

动态引入iframe可以把iframe的加载放到onload事件后，但不好的地方是页面加载时间会更长；动态脚本如下：

<script type="text/javascript">
//doesn't block the load event
function createIframe() {
    var i = document.createElement("iframe");
    i.src = "/path/file";
    i.setAttribute('frameborder', '0', 0);
    i.width = "275px";
    i.height = "260px";
    document.getElementById("iframe_hold").appendChild(i);
};
// Check for browser support of event handling capability
if (window.addEventListener) window.addEventListener("load", createIframe, false);
else if (window.attachEvent) window.attachEvent("onload", createIframe);
else window.onload = createIframe;
</script>