??有的時候，我們需要在一個頁面里引用另一個頁面來展示內(nèi)容，這時會用到iframe標(biāo)簽來嵌入要引用的頁面。但是遇到跨域時，主頁面上的操作無法用在子頁面上，想要正常獲取到子頁面的高度，可以采用以下方法：
說明 本文中測試用到的域名均使用Apache配置生成，非實際站名
方法 一
主頁面和子頁面在不同的子域名下，可以設(shè)置document.domin解決跨域遇到的問題 。關(guān)于document.domin詳情見參考文檔
主頁面www.sweetcat.com
子頁面hot.sweetcat.com
主頁面操作www.sweetcat.com
<script type="text/javascript">
document.domain = "sweetcat.com" //設(shè)置父子頁面的域名
</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"http://設(shè)置父子頁面的域名
window.onload = function() {
var h = document.body.scrollHeight;
parent.document.getElementById("iframe-Scat").style.height = h + "px";
}
</script>
方法 二
主頁面和子頁面在不同的域名下，可以使用使用 HTML5 postMessage。
??postMessage可以實現(xiàn)跨文檔消息傳輸（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>
參考閱讀
