當(dāng)前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

Iframe高度自适应（兼容IEFirefox、同域跨域）

發(fā)布時間：2024/9/27 编程问答 23 豆豆

生活随笔收集整理的這篇文章主要介紹了 Iframe高度自适应（兼容IEFirefox、同域跨域）小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.

在實際的項目進行中，很多地方可能由于歷史原因不得不去使用iframe，包括目前正火熱的應(yīng)用開發(fā)也是如此。

隨之而來的就是在實際使用iframe中，會遇到iframe高度的問題，由于被嵌套的頁面長度不固定而顯示出來的滾動條，不僅影響美觀，還會對用戶操作帶來不便。于是自動調(diào)整iframe的高度就成為本文的重點。

采用JavaScript來控制iframe元素的高度是iframe高度自適應(yīng)的關(guān)鍵，同時由于JavaScript對不同域名下權(quán)限的控制，引發(fā)出同域、跨域兩種情況。

同域時Iframe高度自適應(yīng)
下面的代碼兼容IE/Firefox瀏覽器，控制id為“iframeid”的iframe的高度，通過JavaScript取得被嵌套頁面最終高度，然后在主頁面進行設(shè)置來實現(xiàn)。

項目結(jié)構(gòu)：

其中iframe.html和main.html在同一個域下

代碼如下，可復(fù)制。另外，請注意此解決方案僅供同域名下使用。

<!DOCTYPE html>

<html>

???????? <head>

?????????????????? <meta charset="UTF-8">

?????????????????? <title></title>

???????? </head>

???????? <body>

?????????????????? <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" οnlοad="Javascript:SetCwinHeight()" height="1" frameborder="0" src="iframe.html"></iframe>

???????? </body>

</html>

預(yù)覽效果如下：

跨域時Iframe高度自適應(yīng)
在主頁面和被嵌套的iframe為不同域名的時候，就稍微麻煩一些，需要避開JavaScript的跨域限制。

原理：現(xiàn)有iframe主頁面main.html、被iframe嵌套頁面iframe.html、iframe中介頁面agent.html三個，通過main.html（http://127.0.0.1:8020/iframe3/main.html）嵌套iframe.html（域名為：http://127.0.0.1:8080/tpl/iframe.html，注意端口號），當(dāng)用戶瀏覽時執(zhí)行iframe.html中的JavaScript代碼設(shè)置iframeC的scr地址中加入iframe頁面的高度，agent.html（域名為：http://127.0.0.1:8020/iframe3/agent.html，注意的是它和main.html在同一個域下）取得傳遞的高度，通過JavaScript設(shè)置main.html中iframe的高度。最終實現(xiàn)預(yù)期的目標(biāo)。

項目結(jié)構(gòu)如下：

被嵌套的頁面在另外一個tomcat下：

iframe主頁面main.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

???????? <title>iframe主頁面</title>

??? <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

</head>

<body>

</div>

</body>

</html>

代理頁面agent.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

???????? <title>代理頁面</title>

??? <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

</head>

<body>

function? pseth() {

??? var iObj = parent.parent.document.getElementById('frame_content');

??? iObjH = parent.parent.frames["frame_content"].frames["iframeC"].location.hash;

??? iObj.style.height = iObjH.split("#")[1]+"px";

}

pseth();

</script>

</body>

</html>

被嵌套的頁面iframe.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

???????? <title>被iframe嵌套頁面</title>

??? <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

</head>

<body>

文字<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>

function sethash(){

??? hashH = document.documentElement.scrollHeight;

??? urlC = "http://127.0.0.1:8020/iframe3/agent.html";

??? document.getElementById("iframeC").src=urlC+"#"+hashH;

}

window.οnlοad=sethash;

</script>

</body>

</html>

最終預(yù)覽效果：

與50位技術(shù)專家面對面20年技術(shù)見證，附贈技術(shù)全景圖

總結(jié)

以上是生活随笔為你收集整理的Iframe高度自适应（兼容IEFirefox、同域跨域）的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。

上一篇：第十八天：规划风险管理和识别风险
下一篇： 2018借呗最新免息活动使用时需要这些