如何設置iframe高度自適應，在跨域的狀況下能作到嗎？

時間 2019-11-10

原文原文鏈接

　　在頁面上使用iframe來動態加載頁面內容是網頁開發中比較常見的方法。在父頁面中給定一個不帶滾動條的iframe，而後對屬性src指定一個可加載的頁面，這樣當父頁面被訪問的時候，子頁面能夠被自動加載。iframe的高度須要根據子頁面的實際高度來進行調整。若是iframe的高度小於子頁面的實際高度，超出的部分沒法顯示；相反，若是iframe的高度太高，則頁面上會出現大量的空白區域。咱們能夠經過屬性或者CSS來設置iframe的高度，當不肯定子頁面內容的高度時，也能夠經過腳原本進行動態指定。可是若是子頁面不在同一域中怎麼辦？這時候腳本沒有辦法獲取到子頁面的高度，存在JavaScript跨域的問題！javascript

　　如題所述，本文在介紹可用方法的同時，也向你們詢問除下文列出來的方法以外是否還有其它方法可尋？html

　　經過屬性或CSS來設置iframe的高度這裏就再也不具體介紹了。首先來看看如何經過腳本進行設置。html5

function ChangeFrameHeight(id) {
    var count = 1;
    
    (function() {
    var frm = document.getElementById(id);
    var subWeb = document.frames ? document.frames[id].document : frm.contentDocument;

        if (subWeb != null) {
            var height = Math.max(subWeb.body.scrollHeight, subWeb.documentElement.scrollHeight);
            frm.height = height;
        }
        if (count < 3) {
            count = count + 1;
            window.setTimeout(arguments.callee, 2000);
        }
    })();
}

　　假設iframe子頁面和父頁面都在同一域內，經過該腳本能夠對給定id的iframe高度進行動態調整。爲了防止父頁面在子頁面以前加載完成，該函數會每隔2秒從新執行一次，一共執行3次。極端狀況下子頁面的加載速度會慢於父頁面，可適當對執行次數和時間作調整。java

<iframe frameborder="0" width="450"  marginheight="0" marginwidth="0" scrolling="no" id="frm1" name="frm1" src="abc.html" onload="ChangeFrameHeight('frm1')"></iframe>

　　若是遇到子頁面跨域的問題，可經過HTML5的postMessage來實現，但前提是子頁面須要主動向父頁面發送信息。下面是子頁面部分：web

<!DOCTYPE html>
<head>
</head>
<body onload="parent.postMessage(document.body.scrollHeight, 'http://target.domain.com');">
  <h3>Got post?</h3>
  <p>Lots of stuff here which will be inside the iframe.</p>
</body>
</html>

　　在父頁面中獲取到子頁面傳遞過來的信息，而後對iframe的高度進行調整。跨域

<script type="text/javascript">
  function resizeCrossDomainIframe(id, other_domain) {
    var iframe = document.getElementById(id);
    window.addEventListener('message', function(event) {
      if (event.origin !== other_domain) return; // only accept messages from the specified domain
      if (isNaN(event.data)) return; // only accept something which can be parsed as a number
      var height = parseInt(event.data) + 32; // add some extra height to avoid scrollbar
      iframe.height = height + "px";
    }, false);
  }
</script>

<iframe src='abc.html' id="frm1" onload="resizeCrossDomainIframe('frm1', 'http://example.com');">
</iframe>

　　有關如何使用HTML5的postMessage()方法能夠查看這篇文章http://dev.w3.org/html5/postmsg/#web-messagingdom

　　可是在大多數狀況下，iframe中所引用的子頁面除了和父頁面不在同一域以外，咱們可能根本沒法對子頁面進行任何操做，或者說子頁面根本沒有提供Corss-document messaging功能。在這種狀況下，經過postMessage()方法也沒法獲取到子頁面的任何信息。因爲沒法和子頁面進行任何交互，也就沒有辦法得知子頁面的document對象，從未沒法根據子頁面的實際高度來調整父頁面iframe的height屬性了。ide

　　目前沒有其它實際有效的方法來處理上面遇到的問題。默認狀況下能夠給iframe指定一個比較大的高度，這樣假設所引用的子頁面內容不會超出範圍，除了在頁面上會留下部分空白區域外，內容顯示基本不會有問題。函數

　　那是否還存在其它比較有效的解決方法呢？期待！post