快捷導(dǎo)航

JavaScript 處理Iframe自適應(yīng)高度(同或不同域名下)

更新時(shí)間：2013年03月29日 17:29:12 作者：

Iframe自適應(yīng)高度一直都備受關(guān)注，接下來為大家介紹下同域名下Iframe自適應(yīng)高度的處理以及跨域時(shí)Iframe高度自適應(yīng)，感興趣的朋友可以參考下哈

1.同域名下Iframe自適應(yīng)高度的處理

 
<iframe onload="Javascript:SetIFrameHeight(this)" src="../Home/b" id="win" name="win" width="100%" height="1"> </iframe> 

當(dāng)然此處我用的是Asp.Net MVC 此處src設(shè)置為路由結(jié)構(gòu)

復(fù)制代碼代碼如下:

 
<script type="text/javascript"> 
function SetIFrameHeight(obj) { 
var win = obj; 
if (document.getElementById) { 
if (win && !window.opera) { 
if (win.contentDocument && win.contentDocument.body.offsetHeight) 
win.height = win.contentDocument.body.offsetHeight; 
else if (win.Document && win.Document.body.scrollHeight) 
win.height = win.Document.body.scrollHeight; 
} 
} 
} 
</script> 

用到的就是iframe嵌套的頁面加載完畢的時(shí)候，運(yùn)用onload事件來獲取嵌套在iframe中網(wǎng)頁的高度，然后賦值給Iframe的高度即可。
2.跨域時(shí)Iframe高度自適應(yīng)

復(fù)制代碼代碼如下:

 
在主頁面和被嵌套的iframe為不同域名的時(shí)候，就稍微麻煩一些，需要避開JavaScript的跨域限制。 
原理：現(xiàn)有iframe主頁面main.html、被iframe嵌套頁面iframe.html、iframe中介頁面agent.html三個(gè)，通過main.html（域名為http://www.ccvita.com）嵌套iframe.html（域名為：http://www.phpq.net），當(dāng)用戶瀏覽時(shí)執(zhí)行iframe.html中的JavaScript代碼設(shè)置iframeC的scr地址中加入iframe頁面的高度，agent.html（域名為：http://www.ccvita.com）取得傳遞的高度，通過JavaScript設(shè)置main.html中iframe的高度。最終實(shí)現(xiàn)預(yù)期的目標(biāo)。 

iframe主頁面main.html 
[code] 
< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head><title>iframe主頁面</title></head> 
<body> 
<div style="border:1px solid #ccc;padding:10px;"> 
<iframe id="frame_content" name="frame_content" src="iframe.html" width="100%" height="0" scrolling="no" frameborder="0"></iframe> 
</div> 
<br />尾部<br /> 
</body> 
</html> 

iframe嵌套頁面iframe.html

復(fù)制代碼代碼如下:

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head><title>被iframe嵌套頁面</title></head> 
<body> 
文字<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /> 
文字<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /> 
文字<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /> 
文字<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /> 
<iframe id="iframeC" name="iframeC" src="" width="0" height="0" style="display:none;" ></iframe> 
<script type="text/javascript"> 
function sethash(){ 
hashH = document.documentElement.scrollHeight; 
urlC = "agent.html"; 
document.getElementByIdx("iframeC").src=urlC+"#"+hashH; 
} 
window.onload=sethash; 
</script> 
</body> 
</html> 

iframe中介頁面agent.html

復(fù)制代碼代碼如下:

 
< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head><title>iframe中介頁面</title></head> 
<body> 
<script> 
function pseth() { 
var iObj = parent.parent.document.getElementByIdx('frame_content'); 
iObjH = parent.parent.frames["frame_content"].frames["iframeC"].location.hash; 
iObj.style.height = iObjH.split("#")[1]+"px"; 
} 
pseth(); 
</script> 
</body> 
</html> 