_{<ins id="hpdfh"></ins>}

Iframe 高度自適應（兼容IE/Firefox、同域/跨域）

2024-07-11 08:26:41

字體：大中小

來源：轉載

供稿：網友

隨之而來的就是在實際使用iframe中，會遇到iframe高度的問題，由于被嵌套的頁面長度不固定而顯示出來的滾動條，不僅影響美觀，還會對用戶操作帶來不便。于是自動調整iframe的高度就成為本文的重點。
采用JavaScript來控制iframe元素的高度是iframe高度自適應的關鍵，同時由于JavaScript對不同域名下權限的控制，引發出同域、跨域兩種情況。
同域時Iframe高度自適應
下面的代碼兼容IE/Firefox瀏覽器，控制id為“iframeid”的iframe的高度，通過JavaScript取得被嵌套頁面最終高度，然后在主頁面進行設置來實現。
代碼如下，可復制。另外，請注意此解決方案僅供同域名下使用。

復制代碼

代碼如下:
<script type="text/javascript">
function SetCwinHeight(){
var iframeid=document.getElementById("iframeid"); //iframe id
if (document.getElementById){
if (iframeid && !window.opera){
if (iframeid.contentDocument && iframeid.contentDocument.body.offsetHeight){
iframeid.height = iframeid.contentDocument.body.offsetHeight;
}else if(iframeid.Document && iframeid.Document.body.scrollHeight){
iframeid.height = iframeid.Document.body.scrollHeight;
}
}
}
}
</script>
<iframe width="100%" id="iframeid" onload="Javascript:SetCwinHeight()" height="1" frameborder="0" src="kimi.php"></iframe>

跨域時Iframe高度自適應
在主頁面和被嵌套的iframe為不同域名的時候，就稍微麻煩一些，需要避開JavaScript的跨域限制。
原理：現有iframe主頁面main.html、被iframe嵌套頁面iframe.html、iframe中介頁面agent.html三個，通過main.html（域名為http://www.ccvita.com）嵌套iframe.html（域名為：http: //www.phpq.net），當用戶瀏覽時執行iframe.html中的JavaScript代碼設置iframeC的scr地址中加入 iframe頁面的高度，agent.html（域名為：http://www.ccvita.com）取得傳遞的高度，通過JavaScript設置 main.html中iframe的高度。最終實現預期的目標。
代碼下載：http://xiazai.Vevb.com/201003/yuanma/css_iframe.rar
iframe主頁面main.html

復制代碼

代碼如下:
< !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>
尾部

</body>
</html>

上一篇：div vertical-align不起作用解決辦法

下一篇：使您的CSS網頁布局代碼更專業精簡CSS文件