iframe的WPO优化技巧

最新推荐文章于 2024-07-09 15:37:14 发布

Arimis

最新推荐文章于 2024-07-09 15:37:14 发布

阅读量685

点赞数

分类专栏： WPO 文章标签： WPO iframe

WPO 专栏收录该内容

1 篇文章

订阅专栏

本文探讨了iframe在网页加载过程中的使用优化，包括不同加载时机的影响、繁忙指示器问题及解决方案，推荐采用动态异步调用以改善用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1. 普通的Iframe

代码：
<iframe src="http://tanyanyun-163-com.iteye.com/blog/”/path/to/file”" rel="nofflow"/>

- iframe 在主页面之前加载
- iframe 要等所有内容下载完，才开始启动
- 主页面在iframe全部完成后，才开始加载。阻塞！阻塞！！
- 当iframe加载的时候，页面一直显示繁忙指示器。

2. iframe在主页面之后加载

代码：
<script>
//doesn’t block the load event
function createIframe(){
var i = document.createElement(“iframe”);
i.src="http://tanyanyun-163-com.iteye.com/blog/“path/to/file”;
i.scrolling = “auto”;
i.frameborder = “0″;
i.width = “200px”;
i.height = “100px”;
document.getElementById(“div-that-holds-the-iframe”).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>

- iframe 在主页面完成加载后，才开始加载
- 主页面加载的时候，没有被iframe干扰
- 繁忙指示器依然存在。这是不好的地方。

3. 使用iframe setTimeout() 方法

因为对IE8无效，实际应用意义不大，在此略去

4. 采用动态异步调用iframe

代码：
<script>
(function(d){
var iframe = d.body.appendChild(d.createElement(‘iframe’)),
doc = iframe.contentWindow.document;

// style the iframe with some CSS
iframe.style.cssText = “position:absolute;width:200px;height:100px;left:0px;”;

doc.open().write(‘<body onload=”‘ +
‘var d = document;d.getElementsByTagName(\’head\’)[0].’ +
‘appendChild(d.createElement(\’script\’)).src’ +
‘=\’\/path\/to\/file\’”>’);

doc.close(); //iframe onload event happens

})(document);
</script>