跨域iframe高度自适应

跨域iframe高度自适应

当 A页面中嵌入一个新页面B时，我们常常会使用 iframe来实现。当 A页面和 B页面在不同的域名下时，A页面就不能使用 Javascript 访问到的 B页面的高度，那么该如何解决这类问题呢？直接看例子吧。

以下是跨域时 iframe 自适应高度的一些 demo：

说明：

• 以下 A 、B 和 C 分别代表 a.html 、b.html 和 c.html；
• 以下例子均为 A 嵌入 B；
• 以下例子仅提供了主要功能代码片段，完整的代码请到 github 中查看；
• demo01是子域名的例子，其他例子为完全不同的域名。

demo01

关系：

A 和 B 在不同的子域名下。

实现方式：

设置 document.domain，指定相同的 domain 后，两者就可以交互了。

domain/a.html

<script type="text/javascript">
  document.domain = "aaron.com"
</script>

<iframe src="http://sub2.aaron.com/b.html" frameborder="0" width="100%" id="iframe-b"></iframe>

subdomain/b.html

<script type="text/javascript">
  document.domain = "aaron.com"

  window.onload = function() {
    var h  = document.body.scrollHeight;
    parent.document.getElementById("iframe-b").style.height = h + "px";
  }
</script>

demo02

关系：

A 和 B 在不同的域名下。

使用 HTML5 postMessage，支持：Internet Explorer 8, Firefox 3, Opera 9, Chrome 3和 Safari 4。

domain1/a.html

<iframe src="domain2.com/b.html" frameborder="0" width="100%" id="iframe-b"></iframe>

<script type="text/javascript">
  window.onload = function() {
    window.addEventListener('message', function(event) {
      if (event.origin === "http://domain2.com") {
        document.getElementById("iframe-b").style.height = event.data + "px";
      }
    }, false);
  }
</script>

domain2/b.html

<script type="text/javascript">
  window.onload = function() {
    var h  = document.body.scrollHeight;
    parent.postMessage(h, "http://domain1.com");
  }
</script>

demo03

关系：

• A 和 C 在同一个域名下；
• A 和 B 在不同域名下；
• A 嵌入 B
• B 嵌入 C

domain1/a.html

<script type="text/javascript">
  /**
   * This function must be available on the main outer page.
   * When called with a height it will update the size of the
   * iframe to match that height.
   */
  function updateIFrame(height) {
    var iframe = document.getElementById('iframe-b');
    iframe.setAttribute('height', height);
  }
</script>

<iframe src="http://domain2.com/b.html" frameborder="0" width="100%" id="iframe-b"></iframe>

domain1/c.html

<script type="text/javascript">
  window.onload = function() {
    var h = location.search.replace('?', '').split('=')[1];
    // parent.parent.document.getElementById("iframe-b").style.height = h + 'px';
    window.top.updateIFrame(h);
  }
</script>

domain2/b.html

<script type="text/javascript">
  window.onload = function() {
    var h  = document.body.scrollHeight;
    document.getElementById("resize-iframe").src = "http://domain1.com/c.html?height=" + h;
  }
</script>

demo04

关系：

A 和 B 在不同的域名下。

domain1/a.html

<iframe src="http://domain2.com/b.html" frameborder="0" width="100%" id="iframe-b"></iframe>

<script type="text/javascript" src="./js/jquery-1.12.3.min.js"></script>
<script type="text/javascript" src="./js/iframeResizer.min.js"></script>

<script type="text/javascript">
  iFrameResize({log:true});
</script>

domain2/b.html

<script type="text/javascript" src="./js/jquery-1.12.3.min.js"></script>
<script type="text/javascript" src="./js/iframeResizer.contentWindow.min.js"></script>

附加内容：

判断iframe是否加载完

let iframe = document.getElementById(“iframe”);

iframe.onload = () => {

    do something

};