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

   <iframe src="http://domain1.com/c.html" id="resize-iframe" style="display: none;"></iframe>

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

参考

github iframe-resizer-demo 源码