经常会碰到如许一种情形：
在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…