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

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

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

方法 一

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

主页面www.sweetcat.com

子页面hot.sweetcat.com

主页面操作www.sweetcat.com

子页面操作hot.sweetcat.com

方法 二

主页面和子页面在不同的域名下，可以使用使用 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

   
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

子页面操作www.babydog.com

方法 四

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

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

子页面www.babydog.com

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

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

子页面操作www.babydog.com

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

参考阅读

原博文地址