隨之而來的就是在實(shí)際使用iframe中，會(huì)遇到iframe高度的問題，由于被嵌套的頁面長度不固定而顯示出來的滾動(dòng)條，不僅影響美觀，還會(huì)對用 戶操作帶來不便。于是自動(dòng)調(diào)整iframe的高度就成為本文的重點(diǎn)。
采用JavaScript來控制iframe元素的高度是iframe高度自適應(yīng)的關(guān)鍵，同時(shí)由于JavaScript對不同域名下權(quán)限的控制，引 發(fā)出同域、跨域兩種情況。
同域時(shí)Iframe高度自適應(yīng)
下面的代碼兼容IE/Firefox瀏覽器，控制id為“iframeid”的iframe的高度，通過JavaScript取得被嵌套頁面最終高度，然 后在主頁面進(jìn)行設(shè)置來實(shí)現(xiàn)。
代碼如下，可復(fù)制。另外，請注意此解決方案僅供同域名下使用。
<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>
跨域時(shí)Iframe高度自適應(yīng)
在主頁面和被嵌套的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)。
代碼下載：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>
新聞熱點(diǎn)
疑難解答
圖片精選
