作者:sprite_77 | 来源:互联网 | 2024-11-03 15:46
在使用iframe嵌入外部页面时,经常会遇到页面加载不同步的问题。当嵌入的页面响应较慢时,这种异步加载会导致用户体验不佳。本文介绍了如何通过监听iframe加载完成的事件来解决这一问题,并提出了针对双滚动条问题的有效解决方案,以提升整体的用户体验和页面加载效率。
经常会遇到这样一种情景:
在iframe里嵌入另外一个页面时。如果iframe载入的页面响应较快,或许我们感觉不到页面载入的不同步,但试想,如果一个需要内嵌到iframe里的页面的响应很慢,这里会出现一种什么现象呢?这时将会出现所有页面已经载入完成,但在iframe元素处,将会出现空白,直到内嵌页面完成载入时,该空白处才会显示新载入的页面。
可想而知,一个页面如果长时间的空白,对于浏览者来说将意味着什么。
如果在内嵌页面未载入完成时,给出一种加载提示信息。如:“页面加载中”之类的,我想这对浏览页面用户来讲,将不再是煎熬,更是一种视觉上的享受。
为了实现这样的效果,一般会采用如下原理处理。
- iframe载入区域给出友好的提示信息
- 当iframe载入完成时,清空提示信息,而让iframe显示
这些都比较容易,但现在的问题的关键是怎么监听iframe元素内的页面已经载入完成。
关键这个问题,一般来讲,会分两种情况的来讨论解决方案。
- 同域的嵌套。最好是让子页面调用父页面的方法
- 如果是异域,但子页面无法修改,那么:在Firefox/Opera/Safari中,可以直接使用iframe onload事件;而在IE中,可以通过定时器测定子页面的document.readyState,或者使用iframe onreadystatechange事件计算该事件的响应
同域嵌套
parent.html
function ifrmLoaded() {
// code here
}
sub.html
window.Onload= function() {
window.parent.ifrmLoaded();
}
嵌套页面不能修改,或者异域嵌套
- Firefox/Opera/Safari中直接使用iframe onload事件
document.getElementById('ifrm').Onload= function() {
//here doc
}
- 在IE下,注册iframe onreadystatechange事件
var oFrm = document.getElementById('ifrm');
oFrm.Onreadystatechange= function() {
if (this.readyState && this.readyState == 'complete') {
onComplete();
}
}
兼容Firefox/Opera/Safari/IE的处理方式
var oFrm = document.getElementById('ifrm');
oFrm.Onload= oFrm.Onreadystatechange= function() {
if (this.readyState && this.readyState != 'complete') return;
else {
onComplete();
}
}
双滚动条问题
因为iframe默认是inline-block元素,空白符被解析,所以无端端出现滚动条
使用iframe时,一般会出现双滚动条问题,解决方案如下:
1、修改元素的类型为display:block;
2、修改父级样式,如font-size: 0; 或者line-height:0;
3、修改元素的样式vertical-align:middle;
http://hqlong.com/2009/02/620…