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

1、1 web 前端之 iframe 高度自适应、载入完成高度自适应- 方法一：经典代码 iframe 自适应高度，在ie6/ie7/ie8/firefox/opera/chrome/safari通过测试。只适用于同域下，不能跨域。js代码1. 2. 3./ 经典代码 iframe 自适应高度，在ie6/ie7/ie8/firefox/opera/chrome/safari通过测试。4.function iframeheight() 5.var ifm=document.getelementbyid(iframepage); 6.var subweb=document.frames?documen

2、t.framesiframepage.document:ifm.contentdocument; 7.if(ifm!= null &subweb!= null ) 8.ifm.height=subweb.body.scrollheight; 9. 10. 11. /script 方法二：只适用于同域下，不能跨域。js代码1. 2./*iframe自动适应页面 */ 3./ 输入你希望根据页面高度自动调整高度的iframe 的名称的列表4./ 用逗号把每个 iframe 的 id 分隔.例如:myframe1,myframe2，可以只有一个窗体，则不用逗号。5./ 定义 iframe 的

3、 id 6.var iframeids=ifm 7./ 如果用户的浏览器不支持iframe 否将 iframe 隐藏 yes 表示隐藏， no 表示不隐藏8.var iframehide=yes 9.function dyniframesize() 10. 11. var dyniframe= new array() 2 12. for (i=0;iiframeids.length;i+) 13. 14. if(document.getelementbyid) 15. 16. / 自动调整 iframe 高度17. dyniframedyniframe.length=document.gete

4、lementbyid(iframeidsi); 18. if(dyniframei&!window.opera) 19. 20. /dyniframei.style.display=block 21. if(dyniframei.contentdocument&dyniframei.contentdocument.body.offsetheight)/ 如果用户的浏览器netscape 22. dyniframei.height=dyniframei.contentdocument.body.offsetheight; 23. elseif (dyniframei.docume

5、nt&dyniframei.document.body.scrollheight)/如果用户的浏览器ie 24. dyniframei.height=dyniframei.document.body.scrollheight; 25. 26. 27. / 根据设定的参数来处理不支持iframe 的浏览器的显示问题28. if(document.all|document.getelementbyid)&iframehide=no) 29. 30. var tempobj=document.all?document.alliframeidsi:document.getelement

6、byid(iframeidsi) 31. tempobj.style.display=block 32. 33. 34. 35. if(window.aeventlistener) 36. window.aeventlistener(load,dyniframesize,false) 37. elseif (window.attachevent) 38. window.attachevent(onload,dyniframesize) 39. else40. window.onload=dyniframesize 41. 42. 载入完成- 经常会遇到这样一种情况。在 iframe 里嵌入另外

7、一个页面时。如果iframe 载入的页面响应较快，或许们感觉不到页面载入的不同步，但试想，如果一个需要内嵌到iframe 里的页面的响应很3 慢，这里会出现一种什么现象呢？这时将会出现所有页面已经载入完成，但在iframe 元素处，将会出现空白，直到内嵌页面完成载入时，该空白处才会显示新载入的页面。可想而知，一个页面如果长时间的空白，对于浏览者来说将意味着什么。如果在内嵌页面未载入完成时，给出一种加载提示信息。如：“ 页面加载中 ” 之类的，想这对浏览页面用户来讲，将不再煎熬，更一种视觉上的享受。为了实现这样的，一般会采用如下原理处理。 iframe 载入区域给出友好的提示信息。 当 ifra

8、me 载入完成时，清空提示信息，而让iframe 显示。这些都比较容易，但现在的问题的关键怎么监听iframe 元素内的页面已经载入完成。关键这个问题，一般来讲，会分两种情况的来讨论解决方案。 同域的嵌套。让子页面调用父页面的方法。 如果异域，但子页面无法，那么：在firefox/opera/safari中，可以直接使用iframeonload ；而在 ie 中，可以通过定时器测定子页面的document.readystate ，或者使用 iframeonreadystatechange 计算该的响应。1.同域嵌套。parent.html function ifrmloaded() /code

9、here sub.html window.onload= function () window.parent.ifrmloaded(); 有时候，为了防止自己的页面不被别人嵌套，可以采用如下解决：if(window.parent!=window)window.parent.location=http:/hqlong.; /orif(window.top!=window)window.top.location=http:/hqlong.; 2.嵌套页面不能，或者异域嵌套。2.1firefox/opera/safari中直接使用 iframeonloaddocument.getelementbyi

10、d(ifrm).onload=function () /heredoc 2.2 在 ie 下，定时器测 document.readystate或者注册iframeonreadystatechange2.2.1 使用定时器var ofrm=document.getelementbyid(ifrm); var fmstate=function () 4 var state=null ; if(document.readystate) try state=ofrm.document.readystate; catch(e)state= null ; if(state=plete|!state) on

11、complete(); return ; window.settimeout(fmstate,10); ; / 在改变 src 或者通过 formtarget 提交表单时，执行语句：if(fmstate.timeoutint)window.cleartimeout(fmstate.timeoutint); fmstate.timeoutint=window.settimeout(fmstate,400); 2.2.2 使用 iframeonreadystatechangevar ofrm=document.getelementbyid(ifrm); ofrm.onreadystatechange= function () if(this .readystate&& this .readystate=plete) oncomplete(); 每当 iframe 加载页面，过程内会激活onreadystatechange 三次，相应的状态分别loading,interactive和 plete，而最后一次才 plete. 3.兼容 firefox/opera/safari/ie