系統(tǒng)之家 - 系統(tǒng)光盤下載網(wǎng)站！

當(dāng)前位置：系統(tǒng)之家 > 系統(tǒng)教程 > iframe 自適應(yīng)高度的六種方法介紹

iframe 自適應(yīng)高度的六種方法介紹

時(shí)間：2017-11-25 09:03:00 作者：chunhua 來(lái)源：系統(tǒng)之家 1. 掃描二維碼隨時(shí)看資訊 2. 請(qǐng)使用手機(jī)瀏覽器訪問(wèn)： https://m.xitongzhijia.net/xtjc/20171125/112787.html 手機(jī)查看 評(píng)論

　　在實(shí)際使用iframe的過(guò)程中，會(huì)遇到iframe高度的問(wèn)題，對(duì)于iframe 自適應(yīng)高度一直是難點(diǎn)，因?yàn)榧纫紤]瀏覽器的兼容性，還要考慮同域、跨域的情況，下面就給大家介紹iframe 自適應(yīng)高度的六種方法。

iframe 自適應(yīng)高度的六種方法介紹

　　前言：

　　JS自適應(yīng)高度其實(shí)就是設(shè)置iframe的高度，使其等于內(nèi)嵌網(wǎng)頁(yè)的高度，從而看不出來(lái)滾動(dòng)條和嵌套痕跡，對(duì)于用戶體驗(yàn)和網(wǎng)站美觀起著重要作用。·

　　如果內(nèi)容是固定的，那么我們可以通過(guò)CSS來(lái)給它直接定義一個(gè)高度，同樣可以實(shí)現(xiàn)上面的需求，當(dāng)內(nèi)容是未知或者是變化的時(shí)候，情況也各不一樣。

　　iframe 自適應(yīng)高度的六種方法介紹：

　　一、iframe內(nèi)容未知，高度可預(yù)測(cè)

　　這個(gè)時(shí)候，我們可以給它添加一個(gè)默認(rèn)的CSS的min-height值，然后同時(shí)使用JavaScript改變高度。常用的兼容代碼有：·

  1. 01// document.domain = "caibaojian.com";
  2. 02function setIframeHeight(iframe) {
  3. 03if (iframe) {
  4. 04var iframeWin = iframe.contentWindow || iframe.contentDocument.parentWindow;
  5. 05if (iframeWin.document.body) {
  6. 06iframe.height = iframeWin.document.documentElement.scrollHeight || iframeWin.document.body.scrollHeight;
  7. 07}
  8. 08}
  9. 09};
  10. 10window.onload = function () {
  11. 11setIframeHeight(document.getElementById('external-frame'));
  12. 12};
復(fù)制代碼
// document.domain = "caibaojian.com"; function setIframeHeight(iframe) { if (iframe) { var iframeWin = iframe.contentWindow || iframe.contentDocument.parentWindow; if (iframeWin.document.body) { iframe.height = iframeWin.document.documentElement.scrollHeight || iframeWin.document.body.scrollHeight; } } }; window.onload = function () { setIframeHeight(document.getElementById('external-frame')); };

　　二、如果在同個(gè)頂級(jí)域名下，不同子域名之間互通信息

　　設(shè)置document.domain=“caibaojian.com”，只要修改以上的iframe的ID即可了，或者你可以直接在iframe里面寫代碼，我們一般為了不污染HTML代碼，建議使用上面的代碼。

  1. 01<iframe src="backtop.html" frameborder="0" scrolling="no" id="external-frame" onload="setIframeHeight(this)"></iframe>
復(fù)制代碼
<iframe src="backtop.html" frameborder="0" scrolling="no" id="external-frame" onload="setIframeHeight(this)"></iframe>

　　三、多個(gè)iframe的情況下

  1. 01<script language="javascript">
  2. 02//輸入你希望根據(jù)頁(yè)面高度自動(dòng)調(diào)整高度的iframe的名稱的列表
  3. 03//用逗號(hào)把每個(gè)iframe的ID分隔. 例如: ["myframe1", "myframe2"]，可以只有一個(gè)窗體，則不用逗號(hào)。
  4. 04//定義iframe的ID
  5. 05var iframeids=["test"];
  6. 06//如果用戶的瀏覽器不支持iframe是否將iframe隱藏 yes 表示隱藏，no表示不隱藏
  7. 07var iframehide="yes";
  8. 08function dyniframesize()
  9. 09{
  10. 10var dyniframe=new Array()
  11. 11for (i=0; i<iframeids.length; i++)
  12. 12{
  13. 13if (document.getElementById)
  14. 14{
  15. 15//自動(dòng)調(diào)整iframe高度
  16. 16dyniframe[dyniframe.length] = document.getElementById(iframeids[i]);
  17. 17if (dyniframe[i] && !window.opera)
  18. 18{
  19. 19dyniframe[i].style.display="block";
  20. 20if (dyniframe[i].contentDocument && dyniframe[i].contentDocument.body.offsetHeight) //如果用戶的瀏覽器是NetScape
  21. 21dyniframe[i].height = dyniframe[i].contentDocument.body.offsetHeight;
  22. 22else if (dyniframe[i].Document && dyniframe[i].Document.body.scrollHeight) //如果用戶的瀏覽器是IE
  23. 23dyniframe[i].height = dyniframe[i].Document.body.scrollHeight;
  24. 24}
  25. 25}
  26. 26//根據(jù)設(shè)定的參數(shù)來(lái)處理不支持iframe的瀏覽器的顯示問(wèn)題
  27. 27if ((document.all || document.getElementById) && iframehide=="no")
  28. 28{
  29. 29var tempobj=document.all? document.all[iframeids[i]] : document.getElementById(iframeids[i]);
  30. 30tempobj.style.display="block";
  31. 31}
  32. 32}
  33. 33}
  34. 34if (window.addEventListener)
  35. 35window.addEventListener("load", dyniframesize, false);
  36. 36else if (window.attachEvent)
  37. 37window.attachEvent("onload", dyniframesize);
  38. 38else
  39. 39window.onload=dyniframesize;
  40. 40</script>
復(fù)制代碼
<script language="javascript"> //輸入你希望根據(jù)頁(yè)面高度自動(dòng)調(diào)整高度的iframe的名稱的列表 //用逗號(hào)把每個(gè)iframe的ID分隔. 例如: ["myframe1", "myframe2"]，可以只有一個(gè)窗體，則不用逗號(hào)。 //定義iframe的ID var iframeids=["test"]; //如果用戶的瀏覽器不支持iframe是否將iframe隱藏 yes 表示隱藏，no表示不隱藏 var iframehide="yes"; function dyniframesize() { var dyniframe=new Array() for (i=0; i<iframeids.length; i++) { if (document.getElementById) { //自動(dòng)調(diào)整iframe高度 dyniframe[dyniframe.length] = document.getElementById(iframeids[i]); if (dyniframe[i] && !window.opera) { dyniframe[i].style.display="block"; if (dyniframe[i].contentDocument && dyniframe[i].contentDocument.body.offsetHeight) //如果用戶的瀏覽器是NetScape dyniframe[i].height = dyniframe[i].contentDocument.body.offsetHeight; else if (dyniframe[i].Document && dyniframe[i].Document.body.scrollHeight) //如果用戶的瀏覽器是IE dyniframe[i].height = dyniframe[i].Document.body.scrollHeight; } } //根據(jù)設(shè)定的參數(shù)來(lái)處理不支持iframe的瀏覽器的顯示問(wèn)題 if ((document.all || document.getElementById) && iframehide=="no") { var tempobj=document.all? document.all[iframeids[i]] : document.getElementById(iframeids[i]); tempobj.style.display="block"; } } } if (window.addEventListener) window.addEventListener("load", dyniframesize, false); else if (window.attachEvent) window.attachEvent("onload", dyniframesize); else window.onload=dyniframesize; </script>

　　四、針對(duì)知道的iframe的ID調(diào)用

  1. 01function iframeAutoFit(iframeObj){
  2. 02setTimeout(function(){if(!iframeObj) return;iframeObj.height=(iframeObj.Document?iframeObj.Document.body.scrollHeight:iframeObj.contentDocument.body.offsetHeight);},200)
  3. 03}
復(fù)制代碼
function iframeAutoFit(iframeObj){ setTimeout(function(){if(!iframeObj) return;iframeObj.height=(iframeObj.Document?iframeObj.Document.body.scrollHeight:iframeObj.contentDocument.body.offsetHeight);},200) }

　　五、內(nèi)容寬度變化的iframe高度自適應(yīng)

  1. 01<iframe src="backtop.html" frameborder="0" scrolling="no" id="test" onload="this.height=100"></iframe>
  2. 02<script type="text/javascript">
  3. 03function reinitIframe(){
  4. 04var iframe = document.getElementById("test");
  5. 05try{
  6. 06var bHeight = iframe.contentWindow.document.body.scrollHeight;
  7. 07var dHeight = iframe.contentWindow.document.documentElement.scrollHeight;
  8. 08var height = Math.max(bHeight, dHeight);
  9. 09iframe.height = height;
  10. 10console.log(height);
  11. 11}catch (ex){}
  12. 12}
  13. 13window.setInterval("reinitIframe()", 200);
  14. 14</script>
復(fù)制代碼
<iframe src="backtop.html" frameborder="0" scrolling="no" id="test" onload="this.height=100"></iframe> <script type="text/javascript"> function reinitIframe(){ var iframe = document.getElementById("test"); try{ var bHeight = iframe.contentWindow.document.body.scrollHeight; var dHeight = iframe.contentWindow.document.documentElement.scrollHeight; var height = Math.max(bHeight, dHeight); iframe.height = height; console.log(height); }catch (ex){} } window.setInterval("reinitIframe()", 200); </script>

　　六、跨域下的iframe自適應(yīng)高度

　　跨域的時(shí)候，由于js的同源策略，父頁(yè)面內(nèi)的js不能獲取到iframe頁(yè)面的高度，需要一個(gè)頁(yè)面來(lái)做代理。

　　方法如下：

　　假設(shè)www.a.com下的一個(gè)頁(yè)面a.html要包含www.b.com下的一個(gè)頁(yè)面c.html。

　　我們使用www.a.com下的另一個(gè)頁(yè)面agent.html來(lái)做代理，通過(guò)它獲取iframe頁(yè)面的高度，并設(shè)定iframe元素的高度。·

　　a.html中包含iframe：

  1. 01<iframe src="https://www.b.com/c.html" id="Iframe" frameborder="0" scrolling="no" style="border:0px;"></iframe>
復(fù)制代碼
<iframe src="https://www.b.com/c.html" id="Iframe" frameborder="0" scrolling="no" style="border:0px;"></iframe>

　　在c.html中加入如下代碼：

  1. 01<iframe id="c_iframe" height="0" width="0" src="https://www.a.com/agent.html" style="display:none" ></iframe>
  2. 02<script type="text/javascript">
  3. 03(function autoHeight(){
  4. 04var b_width = Math.max(document.body.scrollWidth,document.body.clientWidth);
  5. 05var b_height = Math.max(document.body.scrollHeight,document.body.clientHeight);
  6. 06var c_iframe = document.getElementById("c_iframe");
  7. 07c_iframe.src = c_iframe.src + "#" + b_width + "|" + b_height; // 這里通過(guò)hash傳遞b.htm的寬高
  8. 08})();
  9. 09</script>
復(fù)制代碼
<iframe id="c_iframe" height="0" width="0" src="https://www.a.com/agent.html" style="display:none" ></iframe> <script type="text/javascript"> (function autoHeight(){ var b_width = Math.max(document.body.scrollWidth,document.body.clientWidth); var b_height = Math.max(document.body.scrollHeight,document.body.clientHeight); var c_iframe = document.getElementById("c_iframe"); c_iframe.src = c_iframe.src + "#" + b_width + "|" + b_height; // 這里通過(guò)hash傳遞b.htm的寬高 })(); </script>

　　最后，agent.html中放入一段js：

  1. 01<script type="text/javascript">
  2. 02var b_iframe = window.parent.parent.document.getElementById("Iframe");
  3. 03var hash_url = window.location.hash;
  4. 04if(hash_url.indexOf("#")>=0){
  5. 05var hash_width = hash_url.split("#")[1].split("|")[0]+"px";
  6. 06var hash_height = hash_url.split("#")[1].split("|")[1]+"px";
  7. 07b_iframe.style.width = hash_width;
  8. 08b_iframe.style.height = hash_height;
  9. 09}
  10. 10</script>
復(fù)制代碼
<script type="text/javascript"> var b_iframe = window.parent.parent.document.getElementById("Iframe"); var hash_url = window.location.hash; if(hash_url.indexOf("#")>=0){ var hash_width = hash_url.split("#")[1].split("|")[0]+"px"; var hash_height = hash_url.split("#")[1].split("|")[1]+"px"; b_iframe.style.width = hash_width; b_iframe.style.height = hash_height; } </script>

　　agent.html從URL中獲得寬度值和高度值，并設(shè)置iframe的高度和寬度（因?yàn)閍gent.html在www.a.com下，所以操作a.html時(shí)不受JavaScript的同源限制）

　　關(guān)于iframe 自適應(yīng)高度的六種方法就給大家介紹到這里了，希望可以幫助到廣大的碼農(nóng)們，不要再頭疼了。。。

標(biāo)簽

發(fā)表評(píng)論

共0條

沒(méi)有更多評(píng)論了

評(píng)論就這些咯，讓大家也知道你的獨(dú)特見(jiàn)解

立即評(píng)論

以上留言僅代表用戶個(gè)人觀點(diǎn)，不代表系統(tǒng)之家立場(chǎng)

其他版本軟件

    熱門教程

    • 年
    • 月
    • 周

    人氣教程排行

    相關(guān)系統(tǒng)推薦

    官方交流群 軟件收錄