iframe载入完成时的事件监听与双滚动条问题

2024年5月13日 160次阅读 来源: 104828720

经常会遇到这样一种情景：
在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、修改<iframe>元素的类型为display:block;
2、修改父级样式，如font-size: 0; 或者line-height:0;
3、修改<iframe>元素的样式vertical-align:middle;

http://hqlong.com/2009/02/620…

    原文作者：104828720
    原文地址: https://segmentfault.com/a/1190000008632416
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞