首页技术文章正文

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

更新时间:2017-05-24 来源:黑马程序员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前端培训学院;
首发:http://www.itcast.cn/web/ 
分享到:
在线咨询 我要报名
和我们在线交谈!