如何获取跨域iframe高度

【技术研究】如何动态获取跨域iframe高度

引言

iframe是一个“好东西”，但是又会带给你很多头疼的“问题”，特别是在ios的兼容性问题。在ios当中，iframe里的页面不会随着外层的网页大小自适应弹性缩放。相比之下，PC浏览器浏览器和安卓的浏览器则是可以实现缩放，这导致了差异性。这时候第一时刻，想到的是兼容的写法。专门针对ios专门设置iframe的scrolling属性为“no”，其他浏览器为“yes”，如下方源码。但是如果iframe子页面中存在�响应式部件tab，高度进行变化，则会引起重绘重排，导致页面突然跳到顶部。

html, body{
    height: 100%;
}

#url-wrapper{
    margin-top: 51px;
    height: 100%;
}

#url-wrapper iframe{
    height: 100%;
    width: 100%;
}

#url-wrapper.ios{
    overflow-y: auto;
    -webkit-overflow-scrolling:touch !important;
    height: 100%;
}

#url-wrapper.ios iframe{
    height: 100%;
    min-width: 100%;
    width: 100px;
    *width: 100%;
}

function create_iframe(url){

    var wrapper = jQuery('#url-wrapper');

    if(navigator.userAgent.match(/(iPod|iPhone|iPad)/)){
        wrapper.addClass('ios');
        var scrolling = 'no';
    }else{
        var scrolling = 'yes';
    }

    jQuery('

源码参考brandonxiang/iframe-height。

postMessage

有些人觉得上面的方法非常难理解，因为中间代理层的缘故，增加了请求量，影响了加载�效率。

随着HTML5 API的发展，postMessage是不同的html页面之间进行数据通信的方法，大大简化了上述方法的步骤。

在b.html中添加一段代码，在它加载完成后，往父页面跨域发送自己的高和宽，并且可以限制你发送的父网站的ip地址，大大保证安全性。

//b.html
document.addEventListener('DOMContentLoaded', function () {
    var tbody = document.body
    var width = tbody.clientWidth
    var height = tbody.clientHeight
    window.parent.postMessage({ height: height, width: width }, '*')
}, false)

还需要在a.html网站添加一个事件监听，获取iframe内的b.html发送的高与宽，从而设置父页面的iframe的高与宽。

//a.html
var frame = document.getElementById('other')
window.addEventListener('message', function(e){
    frame.style.height = e.data.height+'px'
    frame.style.width = e.data.width+'px'
})

源码参考brandonxiang/iframe-height。

总结

相比之下，第二种方法会比较简单和有效。但是由于跨域限制，你不得不要求对方添加一段代码去“消除”跨域限制，也是出于安全性不得已的实现方法。

总的来说，iframe在移动端受非常多的限制，尽可能地慎用。

微信公众号

原博客地址

团队GITHUB