全国咨询/投诉热线:400-618-4000

WEB前端培训之iframe高度自适应、载入完成事件

更新时间:2016年11月29日16时21分 来源:传智播客web前端培训学院 浏览次数:

WEB前端培训之iframe高度自适应、载入完成事件

高度自适应
-------------------------------------------------
方法一:
经典代码 iFrame 自适应高度,在IE6/IE7/IE8/Firefox/Opera/Chrome/Safari通过测试。 
只适用于同域下,不能跨域。
 
Js代码  
  1. <iframe src="http://127.0.0.1:8080/HC1/zhuanpan.htm" id="iframepage" name="iframepage" frameBorder=0 scrolling=no width="100%" height="1000" onLoad="iFrameHeight()" ></iframe>   
  2. <script type="text/javascript" language="javascript">   
  3. //经典代码 iFrame 自适应高度,在IE6/IE7/IE8/Firefox/Opera/Chrome/Safari通过测试。   
  4. function iFrameHeight() {   
  5. var ifm= document.getElementById("iframepage");   
  6. var subWeb = document.frames ? document.frames["iframepage"].document : ifm.contentDocument;   
  7. if(ifm != null && subWeb != null) {   
  8. ifm.height = subWeb.body.scrollHeight;   
  9. }   
  10. }   
  11. </script  
 
 
方法二:
只适用于同域下,不能跨域。
Js代码  
  1. <script language="javascript" type="text/javascript">   
  2. //** iframe自动适应页面 **//  
  3.   
  4. //输入你希望根据页面高度自动调整高度的iframe的名称的列表  
  5. //用逗号把每个iframe的ID分隔. 例如: ["myframe1", "myframe2"],可以只有一个窗体,则不用逗号。  
  6.   
  7. //定义iframe的ID  
  8. var iframeids=["ifm"]  
  9.   
  10. //如果用户的浏览器不支持iframe是否将iframe隐藏 yes 表示隐藏,no表示不隐藏  
  11. var iframehide="yes"  
  12.   
  13. function dyniframesize()   
  14. {  
  15. var dyniframe=new Array()  
  16. for (i=0; i<iframeids.length; i++)  
  17. {  
  18.       if (document.getElementById)  
  19. {  
  20. //自动调整iframe高度  
  21. dyniframe[dyniframe.length] = document.getElementById(iframeids[i]);  
  22. if (dyniframe[i] && !window.opera)  
  23. {  
  24. //dyniframe[i].style.display="block"  
  25. if (dyniframe[i].contentDocument && dyniframe[i].contentDocument.body.offsetHeight) //如果用户的浏览器是NetScape  
  26. dyniframe[i].height = dyniframe[i].contentDocument.body.offsetHeight;   
  27. else if (dyniframe[i].Document && dyniframe[i].Document.body.scrollHeight) //如果用户的浏览器是IE  
  28. dyniframe[i].height = dyniframe[i].Document.body.scrollHeight;  
  29. }  
  30. }  
  31. //根据设定的参数来处理不支持iframe的浏览器的显示问题  
  32. if ((document.all || document.getElementById) && iframehide=="no")  
  33. {  
  34. var tempobj=document.all? document.all[iframeids[i]] : document.getElementById(iframeids[i])  
  35. tempobj.style.display="block"  
  36. }  
  37. }  
  38. }  
  39.   
  40. if (window.addEventListener)  
  41. window.addEventListener("load", dyniframesize, false)  
  42. else if (window.attachEvent)  
  43. window.attachEvent("onload", dyniframesize)  
  44. else  
  45. window.onload=dyniframesize  
  46. </script>   
  47. <iframe src="http://127.0.0.1:8080/HC1/zhuanpan.htm" frameBorder=0 width="100%" scrolling="auto" id="ifm" name="ifm" ></iframe>   
 
 
载入完成事件
-------------------------------------------------------------------
经常会遇到这样一种情况。
在iframe里嵌入另外一个页面时。如果iframe载入的页面响应较快,或许我们感觉不到页面载入的不同步,但试想,如果一个需要内嵌到iframe里的页面的响应很慢,这里会出现一种什么现象呢?这时将会出现所有页面已经载入完成,但在iframe元素处,将会出现空白,直到内嵌页面完成载入时,该空白处才会显示新载入的页面。
可想而知,一个页面如果长时间的空白,对于浏览者来说将意味着什么。
如果在内嵌页面未载入完成时,给出一种加载提示信息。如:“页面加载中”之类的,我想这对浏览页面用户来讲,将不再是煎熬,更是一种视觉上的享受。
为了实现这样的效果,一般会采用如下原理处理。
·iframe载入区域给出友好的提示信息。
·当iframe载入完成时,清空提示信息,而让iframe显示。
这些都比较容易,但现在的问题的关键是怎么监听iframe元素内的页面已经载入完成。
关键这个问题,一般来讲,会分两种情况的来讨论解决方案。
·同域的嵌套。最好是让子页面调用父页面的方法。
·如果是异域,但子页面无法修改,那么:在Firefox/Opera/Safari中,可以直接使用iframe onload事件;而在IE中,可以通过定时器测定子页面的document.readyState,或者使用iframe onreadystatechange事件计算该事件的响应。
1.同域嵌套。
parent.html
function ifrmLoaded() {
        // code here
}
sub.html
window.onload = function() {
        window.parent.ifrmLoaded();
}
有时候,为了防止自己的页面不被别人嵌套,可以采用如下方式解决:
if(window.parent!=window) window.parent.location="http://hqlong.com";
//or
if(window.top!=window) window.top.location="http://hqlong.com";
2.嵌套页面不能修改,或者异域嵌套。
2.1 Firefox/Opera/Safari中直接使用iframe onload事件
document.getElementById('ifrm').onload = function() {
        //here doc
}
2.2 IE下,定时器测document.readyState或者注册iframe onreadystatechange事件
2.2.1 使用定时器
var oFrm = document.getElementById('ifrm');
var fmState=function(){
        var state=null;
        if(document.readyState){
               try{
                       state=oFrm.document.readyState;
               }catch(e){state=null;}
               if(state=="complete" || !state) {
                       onComplete();
                       return;
               }
               window.setTimeout(fmState,10);
        }
};
//在改变src或者通过form target提交表单时,执行语句:
if(fmState.TimeoutInt) window.clearTimeout(fmState.timeoutInt);
fmState.timeoutInt = window.setTimeout(fmState,400);
2.2.2 使用iframe onreadystatechange事件
var oFrm = document.getElementById('ifrm');
oFrm.onreadystatechange = function() {
        if (this.readyState &amp;&amp; this.readyState == 'complete') {
               onComplete();
        }
}
每当iframe加载页面,过程内会激活onreadystatechange事件三次,相应的状态分别是loading,interactive和complete,而最后一次才是complete.
3. 兼容Firefox/Opera/Safari/IE的处理方式。
var oFrm = document.getElementById('ifrm');
oFrm.onload = oFrm.onreadystatechange = function() {
     if (this.readyState &amp;&amp; this.readyState != 'complete') return;
     else {
         onComplete();
     }
 web前端开发培训
 
本文版权归传智播客web前端开发学院所有,欢迎转载,转载请注明作者出处,谢谢!
作者:传智播客web前端培训学院;
首发:http://www.itcast.cn/web/ 

javaee

python

web

ui

cloud

test

c

netmarket

pm

Linux

movies

robot

uids

北京校区

    14天免费试学

    基础班入门课程限时免费

    申请试学名额

    15天免费试学

    基础班入门课程限时免费

    申请试学名额

    15天免费试学

    基础班入门课程限时免费

    申请试学名额

    15天免费试学

    基础班入门课程限时免费

    申请试学名额

    20天免费试学

    基础班入门课程限时免费

    申请试学名额

    8天免费试学

    基础班入门课程限时免费

    申请试学名额

    20天免费试学

    基础班入门课程限时免费

    申请试学名额

    5天免费试学

    基础班入门课程限时免费

    申请试学名额

    0天免费试学

    基础班入门课程限时免费

    申请试学名额

    12天免费试学

    基础班入门课程限时免费

    申请试学名额

    5天免费试学

    基础班入门课程限时免费

    申请试学名额

    5天免费试学

    基础班入门课程限时免费

    申请试学名额

    10天免费试学

    基础班入门课程限时免费

    申请试学名额