6種iframe高度自适應的方法

js自适應高度，實際上就是設定iframe的高度，設定等于内嵌網頁的高度，進而看不到滾動條和嵌套痕迹。對于使用者體驗和網站美觀起着重要作用。我們可以通過css來給它直接定義一個高度，同樣可以實作上面的需求。當内容是未知或者是變化的時候。這個時候又有幾種情況了。

1、iframe内容未知，高度可預測

這個時候，我們可以給它添加一個替換的css的min-height值，然後同時使用JavaScript改變高度。常用的相容代碼有：

// 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'));
};

如果在同一個頂級域名下，不同子域名之間互通資訊，設定document.domain =“ caibaojian.com”隻要修改以上的iframe的ID就可以了。不污染html代碼，建議使用上面的代碼。

<iframe src="backtop.html" frameborder="0" scrolling="no" id="external-frame" onload="setIframeHeight(this)"></iframe>

2、多個iframe的情況下

<script language="JavaScript">
//輸入你希望根據頁面高度自動調整高度的iframe的名稱的清單
//用逗号把每個iframe的ID分隔. 例如: ["myframe1", "myframe2"]，可以隻有一個窗體，則不用逗号。
//定義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)
{
//自動調整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;
}
}
//根據設定的參數來處理不支援iframe的浏覽器的顯示問題
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>

3、針對知道的iframe的ID調用

function iframeAutoFit(iframeObj){
setTimeout(function(){if(!iframeObj) return;iframeObj.height=(iframeObj.Document?iframeObj.Document.body.scrollHeight:iframeObj.contentDocument.body.offsetHeight);},200)
}

4、内容寬度變化的iframe高度自适應

<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>

5、跨域下的iframe自适應高度

跨域的時候，由于js的同源政策，父頁面内的js無法擷取到iframe頁面的高度。需要一個頁面來做代理。方法如下：假設www.a.com下一個一個頁面a.html要包含我們使用www.a.com下一個另一個頁面agent.html來做代理，通過它擷取iframe頁面的高度，并設定iframe元素的高度。html中包含iframe：

<iframe src="http://www.b.com/c.html" id="Iframe" frameborder="0" scrolling="no"></iframe>

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

<iframe id="c_iframe"  height="0" width="0"  src="http://www.a.com/agent.html" ></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;  // 這裡通過hash傳遞b.htm的寬高
})();
</script>

最後，agent.html中加入一段js：

<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中獲得寬度值和高度值，并設定iframe的高度和寬度（因為agent.html在www.a.com下，是以操作a.html時不受JavaScript的類似限制）

6、postMessage + window.name實作跨域iframe高度自适應相容版

我們知道HTML5 PostMessage不支援IE8以下的浏覽器跨域，于是我想到了window.name支援ie6和ie7的方案，那麼能否把這兩種合并起來，變成一種全相容的跨域方案呢？還别說，真有人能做到。

html5 postMessage實作跨域

postMessage是html5的一個新功能，可以實作不同域名之間的通信，通過給postMessage方式發送資料，監聽則通過在父子視窗上添加onmessage事件進行。缺點也就很明顯了，隻有支援html5的浏覽器才支援這種跨域方式，像IE6、7當然就拒之門外了！

window.name實作跨域

window.name實作跨域也是一個比較老的問題，之前kejun寫過一個示範，可是給的卻是同域名的通信。其實kejun的執行個體中就是實作跨域的，不過他采用了同一個域名，而且過程比較崎岖：

建立iframe，指定src為被跨域的頁面
被跨域檔案修改window.name，将資料傳給window.name
将iframe.src修改為本域代理檔案，然後就可以取到contentWindow.name
進行處理資料，清除iframe充分的運用了window.name因為頁面的URL改變而名稱不改變的特性。但是如果我們是自己用，還是可以的，而如果我們放出去要别人使用我們寫的東西，那樣學習成本太大。

多浏覽器雙向跨域

為了解決上面的問題，我們使用的方法就是如果支援postMessage的浏覽器就使用postMessage，如果不支援的就采用window.name的方式，幸運的是在IE6、7中支援跨域設定window.name，而我們就可以簡單的通過window.name來跨域。

然後建立計時器來監聽window.name是否發生了變化，如果變化則接收并分析window.name，然後做請求。

示範和代碼：

<body>
  <div style="width:100%;border:1px solid green;">
    <h3>this page from :<span id="host"></span></h3>
    <input type="text" value="" id="data" /><button id="btn" onclick="send();">送出</button>
  </div>
  
  <iframe id="iframeA" src="http://1.qdemo.sinaapp.com/cross-domain/client.html" style="border:1px solid #ff6600;width:100%;height:300px;"></iframe>
  <script type="text/javascript">
    document.getElementById('host').innerHTML = location.host;
    function send(){
      var val = document.getElementById('data').value;
      sendMessage(val);
    }
    (function(win, doc){
      var ifr = doc.getElementById('iframeA').contentWindow;
      var cb = function(json){
        alert(location.host+" get msg:"+json);
      };
      var sendMessage = function(){
        if(win.postMessage){
          if (win.addEventListener) {
                    win.addEventListener("message",function(e){
            cb.call(win,e.data);
          },false);
                }else if(win.attachEvent) {
                    win.attachEvent("onmessage",function(e){
            cb.call(win,e.data);
          });
                }
          return function(data){
            ifr.postMessage(data,'*');
          };
        }else{
          var hash = '';
          
          setInterval(function(){
          
            if (win.name !== hash) {
              hash = win.name;
              cb.call(win, hash);
            }
          }, 50);
          return function(data){
            ifr.name = data;
          };
        }
      };
      win.sendMessage = sendMessage();
    })(window, document);
</script>
</body>

<body>
  <h3>this page from :<span id="host"></span></h3>
  <input type="text" value="" id="data" /><button id="btn" onclick="send();">送出</button>
  <ul>
    <li>firefox、chrome等進階浏覽器采用html5 postMessage方法</li>
    <li>IE6 7等使用window.name方法</li>
    <li>支援雙向跨域，在chrome 13、firefox6、IE6+測試通過</li>
    <li>window.name可以通過data加随機數方式，避免兩次送出的資料相同，本例沒做處理，是以如果不改變value值點選送出是不會觸發alert的</li>
    <li><a href="cross-domain.zip">demo下載下傳</a></li>
  </ul>
  <script type="text/javascript">
    document.getElementById('host').innerHTML = location.host;
    function send(){
      var val = document.getElementById('data').value;
      sendMessage(val);
    }
    (function(win, doc){
      var ifr = win.parent;
      
      var cb = function(json){
        alert(location.host+"  get msg:"+json);
      };
      var sendMessage = function(){
        if(win.postMessage){
          if (win.addEventListener) {
                    win.addEventListener("message",function(e){
            cb.call(win,e.data);
          },false);
                }else if(win.attachEvent) {
                    win.attachEvent("onmessage",function(e){
            cb.call(win,e.data);
          });
                }


          return function(data){
            ifr.postMessage(data,'*');
          };
        }else{
          var hash = '';
          
          setInterval(function(){
            if(win.name!==hash){
              hash = win.name;
              cb.call(win,hash);
            }
          },50);
          return function(data){
            ifr.name = data;
          };
        }
      }
      win.sendMessage = sendMessage();
    })(window, document);
</script>
</body>

基于上面的代碼，結合我上篇文章的示範，我們再來命名一個iframe自适應高度的解決方案。

本文完〜

6種iframe高度自适應的方法

1、iframe内容未知，高度可預測

2、多個iframe的情況下

3、針對知道的iframe的ID調用

4、内容寬度變化的iframe高度自适應

5、跨域下的iframe自适應高度

6、postMessage + window.name實作跨域iframe高度自适應相容版

html5 postMessage實作跨域

window.name實作跨域

多浏覽器雙向跨域

繼續閱讀

web開發之前後端渲染

請求逾時VUE axios重新再次請求

nodejs微信開發---授權登入+擷取使用者資訊微信網頁授權

403 Forbidden，You don't have permission to access / on this server.Forbidden

debian9更新4.9.0核心到4.19.2核心過程

Javascript建構Bingo卡片遊戲

JavaScript的那些坑之事件代理事件代理事件階段

javascript的for (var i in data)慎用javascript中的for (var i in data)謹慎用

tab滑鼠經過菜單切換

vue （vue2.0）使用總結(從大體結構總結)

vue搭建過程及出現問題

/\B(?=(?:\d{3})+$)/g 一條令人費解的正規表達式

适用于JavaScript的ECMAScript 2020規範向前發展

JS生成uuid的四種方法

layui多任務上傳添加進度條