有的时候，我们需要在一个页面里引用另一个页面来展示内容，这时会用到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>
参考阅读
