iframe高度自适应、载入完成事件

高度自适应

-------------------------------------------------

方法一：

经典代码 iFrame 自适应高度，在IE6/IE7/IE8/Firefox/Opera/Chrome/Safari通过测试。 

只适用于同域下，不能跨域。

 伦理片 http://www.dotdy.com/

Js代码  


<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>   

<script type="text/javascript" language="javascript">   

//经典代码 iFrame 自适应高度，在IE6/IE7/IE8/Firefox/Opera/Chrome/Safari通过测试。   

function iFrameHeight() {   

var ifm= document.getElementById("iframepage");   

var subWeb = document.frames ? document.frames["iframepage"].document : ifm.contentDocument;   

if(ifm != null && subWeb != null) {   

ifm.height = subWeb.body.scrollHeight;   

}   

}   

</script  

 

 

方法二：

只适用于同域下，不能跨域。

Js代码  


<script language="javascript" type="text/javascript">   

//** iframe自动适应页面 **//  

  

//输入你希望根据页面高度自动调整高度的iframe的名称的列表  

//用逗号把每个iframe的ID分隔. 例如: ["myframe1", "myframe2"]，可以只有一个窗体，则不用逗号。  

  

//定义iframe的ID  

var iframeids=["ifm"]  

  

//如果用户的浏览器不支持iframe是否将iframe隐藏 yes 表示隐藏，no表示不隐藏  

var iframehide="yes"  

  

function dyniframesize()   

{  

var dyniframe=new Array()  

for (i=0; i<iframeids.length; i++)  

{  

      if (document.getElementById)  

{  

//自动调整iframe高度  

dyniframe[dyniframe.length] = document.getElementById(iframeids[i]);  

if (dyniframe[i] && !window.opera)  

{  

//dyniframe[i].style.display="block"  

if (dyniframe[i].contentDocument && dyniframe[i].contentDocument.body.offsetHeight) //如果用户的浏览器是NetScape  

dyniframe[i].height = dyniframe[i].contentDocument.body.offsetHeight;   

else if (dyniframe[i].Document && dyniframe[i].Document.body.scrollHeight) //如果用户的浏览器是IE  

dyniframe[i].height = dyniframe[i].Document.body.scrollHeight;  

}  

}  

//根据设定的参数来处理不支持iframe的浏览器的显示问题  

if ((document.all || document.getElementById) && iframehide=="no")  

{  

var tempobj=document.all? document.all[iframeids[i]] : document.getElementById(iframeids[i])  

tempobj.style.display="block"  

}  

}  

}  

  

if (window.addEventListener)  

window.addEventListener("load", dyniframesize, false)  

else if (window.attachEvent)  

window.attachEvent("onload", dyniframesize)  

else  

window.onload=dyniframesize  

</script>   

<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://xiubt.com";
//or
if(window.top!=window) window.top.location="http://xiubt.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 && 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 && this.readyState != 'complete') return;
else {
onComplete();
}