今天在对接的时候,iframe引入第三方的页面的时候,本想获取页面高度再去设置ifrmae的高度。但是因为网站和iframe子页面的域名不一样,所以出现了跨域问题。不过好在第三方是合作关系,让他们配合调整了一下页面,我们这里也改了一下,很容易也就解决了。
问题:
引入iframe页面的时候,母页面与子页面的域名不一样,出现跨域
解决前提:
能有权限修改两边的页面。
解决方法:
使用 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>
参考链接:跨域iframe高度自适应的多种方法