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、修正<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
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞