Iframe 高度自適應(yīng)（兼容IE/Firefox、同域/跨域）
采用JavaScript來(lái)控制iframe元素的高度是iframe高度自適應(yīng)的關(guān)鍵，同時(shí)由于JavaScript對(duì)不同域名下權(quán)限的控制，引 發(fā)出同域、跨域兩種情況。
同域時(shí)Iframe高度自適應(yīng)
下面的代碼兼容IE/Firefox瀏覽器，控制id為“iframeid”的iframe的高度，通過(guò)JavaScript取得被嵌套頁(yè)面最終高度，然 后在主頁(yè)面進(jìn)行設(shè)置來(lái)實(shí)現(xiàn)。
代碼如下，可復(fù)制。另外，請(qǐng)注意此解決方案僅供同域名下使用。
| <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)
在主頁(yè)面和被嵌套的iframe為不同域名的時(shí)候，就稍微麻煩一些，需要避開(kāi)JavaScript的跨域限制。
原理：現(xiàn)有iframe主頁(yè)面main.html、被iframe嵌套頁(yè)面iframe.html、iframe中介頁(yè)面agent.html三 個(gè)，通過(guò)main.html（域名為http://theartemis.cn）嵌套iframe.html（域名為：http: //www.zfshow.com），當(dāng)用戶(hù)瀏覽時(shí)執(zhí)行iframe.html中的JavaScript代碼設(shè)置iframeC的scr地址中加入 iframe頁(yè)面的高度，agent.html（域名為：http://theartemis.cn）取得傳遞的高度，通過(guò)JavaScript設(shè)置 main.html中iframe的高度。最終實(shí)現(xiàn)預(yù)期的目標(biāo)。
代碼下載：css_iframe.rar
iframe主頁(yè)面main.html|
</body> |
如對(duì)本文有疑問(wèn)，請(qǐng)?zhí)峤坏浇涣髡搲瑥V大熱心網(wǎng)友會(huì)為你解答?。?點(diǎn)擊進(jìn)入論壇
