高度自適應

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

方法一：

經典程式碼 iFrame 自適應高度，在IE6/IE7/IE8/Firefox/Opera/Chrome/Safari通過測試。 

只適用於同域下，不能跨域。

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  

方法二：

只適用於同域下，不能跨域。

1. <script language="javascript" type="text/javascript">   
2. //** iframe自動適應頁面 **//  
3. //輸入你希望根據頁面高度自動調整高度的iframe的名稱的列表  
4. //用逗號把每個iframe的ID分隔. 例如: ["myframe1", "myframe2"]，可以只有一個窗體，則不用逗號。
     
5. //定義iframe的ID  
6. var iframeids=["ifm"]  
7. //如果使用者的瀏覽器不支援iframe是否將iframe隱藏 yes 表示隱藏，no表示不隱藏  
8. var iframehide="yes"  
9. function dyniframesize()   
10. {  
11. var dyniframe=new Array()  
12. for (i=0; i<iframeids.length; i++)  
13. {  
14.       if (document.getElementById)  
15. {  
16. //自動調整iframe高度  
17. dyniframe[dyniframe.length] = document.getElementById(iframeids[i]);  
18. if (dyniframe[i] && !window.opera)  
19. {  
20. //dyniframe[i].style.display="block"  
21. if (dyniframe[i].contentDocument && dyniframe[i].contentDocument.body.offsetHeight) //如果使用者的瀏覽器是NetScape  
22. dyniframe[i].height = dyniframe[i].contentDocument.body.offsetHeight;   
23. else if (dyniframe[i].Document && dyniframe[i].Document.body.scrollHeight) //如果使用者的瀏覽器是IE  
24. dyniframe[i].height = dyniframe[i].Document.body.scrollHeight;  
25. }  
26. }  
27. //根據設定的引數來處理不支援iframe的瀏覽器的顯示問題  
28. if ((document.all || document.getElementById) && iframehide=="no")  
29. {  
30. var tempobj=document.all? document.all[iframeids[i]] : document.getElementById(iframeids[i])  
31. tempobj.style.display="block"  
32. }  
33. }  
34. }  
35. if (window.addEventListener)  
36. window.addEventListener("load", dyniframesize, false)  
37. else if (window.attachEvent)  
38. window.attachEvent("onload", dyniframesize)  
39. else  
40. window.onload=dyniframesize  
41. </script>   
42. <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 && 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();
     }