解决iFrame跨域自适应高度的多种方法

  有的时候，我们需要在一个页面里引用另一个页面来展示内容，这时会用到iframe标签来嵌入要引用的页面。但是遇到跨域时，主页面上的操作无法用在子页面上，想要正常获取到子页面的高度，可以采用以下方法：

说明 本文中测试用到的域名均使用Apache配置生成，非实际站名

方法 一

主页面和子页面在不同的子域名下，可以设置document.domin解决跨域遇到的问题 。关于document.domin详情见参考文档

主页面www.sweetcat.com

子页面hot.sweetcat.com

主页面操作www.sweetcat.com

 <script type="text/javascript">
      document.domain = "sweetcat.com" //设置父子页面的域名
 </script>
<iframe src="http://hot.sweetcat.com" frameborder="0" width="100%" id="iframe-Scat"></iframe>

子页面操作hot.sweetcat.com

 <script type="text/javascript">
   document.domain = "sweetcat.com"//设置父子页面的域名

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

方法 二

主页面和子页面在不同的域名下，可以使用使用 HTML5 postMessage。

  postMessage可以实现跨文档消息传输（Cross Document Messaging），Internet Explorer 8, Firefox 3, Opera 9, Chrome 3和 Safari 4都支持postMessage。

主页面www.sweetcat.com

子页面www.babydog.com

主页面操作www.sweetcat.com

<iframe src="http://www.babydog.com/" frameborder="0" id="iframe-Scat" scrolling="no" width="100%"></iframe>   
window.onload = function(){
        window.addEventListener('message',function(event){
            if(event.origin == "http://www.babydog.com") {
                document.getElementById('iframe-Scat').style.height = event.data + "px";
            }
        })
    }

子页面操作www.babydog.com

  window.onload = function () {
      var h = document.body.scrollHeight;
      parent.postMessage(h, "http://www.sweetcat.com");
  }

注意：

在用这种方法的时候，有时会报“Failed to execute 'postMessage' on 'DOMWindow'”的错误，但是在测试的时候，这个错误不影响效果的显示,具体有待深究。扩展阅读

方法 三

主页面和子页面在不同的域名下，可以使用iFrame Resizer插件解决获取子页面高度问题。iFrame-Resizer官方文档

主页面www.sweetcat.com

子页面www.babydog.com

主页面操作www.sweetcat.com

<iframe src="http://www.babydog.com/" frameborder="0" id="iframe-Scat" scrolling="no" width="100%"></iframe>  
  <script src="./jquery.min.js"></script>
  <script src="./iframeResizer.min.js"></script>
  <script>
    iFrameResize({log:true});
  </script>

子页面操作www.babydog.com

<script src="./jquery.min.js"></script>
<script src="./iframeResizer.contentWindow.min.js"></script>

方法 四

采用“迂回”的方式解决页面高度获取问题。在主页面的域下建一个空的页面，子页面引用这个空的页面，再通过传参的方式，将子页面的高度“告知”主页面

主页面www.sweetcat.com/a.html

子页面www.babydog.com

子嵌页面www.sweetcat.com/b.html

主页面操作www.sweetcat.com/a.html

<iframe src="http://www.babydog.com" frameborder="0" width="100%" id="iframe-Scat"></iframe>

<script type="text/javascript">
      function updateIFrame(height) {
        var iframe = document.getElementById('iframe-Scat');
        iframe.setAttribute('height', height);
      }
</script>

子页面操作www.babydog.com

<iframe src="http://www.sweetcat.com/b.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>

子嵌页面操作www.sweetcat.com/b.html

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

参考阅读

原博文地址