目的：系統A的indexA.html頁面，用iframe的形式集成系統B的indexB.html頁面
方法1：使用使用 HTML5 postMessage。(強烈推薦)
postMessage可以實現跨文檔消息傳輸（Cross Document Messaging），Internet Explorer 8, Firefox 3, Opera 9, Chrome 3和 Safari 4都支持postMessage。
indexA.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>系統A - 主頁</title>
</head>
<body>
<iframe class="cross-iframe" id="crossIframe" frameborder="no" scrolling="no" width="100%" src="http://localhost:8848/webtest/page/indexB.html">
</iframe>
<script type="text/javascript">
window.onload = function(){
window.addEventListener('message',function(event){
if(event.origin == "http://localhost:8848") {
document.getElementById('crossIframe').style.height = event.data + "px";
}
})
}
</script>
</body>
</html>
indexB.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>系統B - 主頁</title>
</head>
<body>
<div style="background-color: #0000FF;" id="test">
<input type="number" value="300" id="test_input"/>
</div>
<script src="https://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/jquery-resize/1.1/jquery.ba-resize.js"></script>
<script type="text/javascript">
//改變頁面高度
$("#test_input").on("change",function(){
$("#test").height($(this).val());
});
$('body').resize(function(){
var h = document.body.scrollHeight;
window.parent.postMessage(h, "http://127.0.0.1:8848");
});
</script>
</body>
</html>
方法2：使用iFrame Resizer插件
indexA.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>系統A - 主頁</title>
</head>
<body>
<iframe class="cross-iframe" id="crossIframe" frameborder="no" scrolling="no" width="100%" src="http://localhost:8848/webtest/page/indexB.html">
</iframe>
<script src="../js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script src="../js/iframeResizer/iframeResizer.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$('#crossIframe').iFrameResize({});
</script>
</body>
</html>
indexB.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>系統B - 主頁</title>
</head>
<body>
<div style="background-color: #0000FF;" id="test">
<input type="number" value="300" id="test_input"/>
<button type="button" id="test_btn">提交</button>
</div>
<script src="../js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script src="../js/iframeResizer/iframeResizer.contentWindow.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$("#test_btn").click(function(){
$("#test").height($("#test_input").val());
});
</script>
</body>
</html>
方法3：使用代理頁面實現
由於域名不同導致跨域，A系統的頁面（以下A系統頁面簡稱A頁）無法獲取和操作B系統頁面（以下B系統頁面簡稱B頁）元素，所以B頁需要首先用iframe嵌入A系統的一個頁面例如：cross.html，然後B頁將自身的高度當做hash值設置到iframe的src中，然後由於cross.html獲取自身url上的hash中B頁的高度，並將其賦值給A中的iframe。（這裏需要說明一下，由於cross.html與indexA.html同屬於A系統，所以可以獲取並操作A頁面的元素，獲取方式如:window.parent.parent.document.getElementsByTagName("iframe")（::獲取父窗口的父窗口中的所有iframe元素））,代碼樣例如下：
indexA.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>系統A - 主頁</title>
</head>
<body>
<iframe class="cross-iframe" frameborder="no" scrolling="no" width="100%" src="http://localhost:8848/webtest/page/indexB.html">
</iframe>
</body>
</html>
indexB.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>系統B - 主頁</title>
</head>
<body>
<div style="background-color: #0000FF;" id="test">
<input type="number" value="300" id="test_input"/>
</div>
<script src="https://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/jquery-resize/1.1/jquery.ba-resize.js"></script>
<script type="text/javascript">
//改變頁面高度
$("#test_input").on("change",function(){
$("#test").height($(this).val());
});
// 監聽body高度變化,並將變化後的高度設置到iframe路徑中去
var iframeId = 'iframe_' + new Date().getTime();
$('body').resize(function(){
$("#" + iframeId).length>0 && $("#" + iframeId).detach();
var b_width = document.body.scrollWidth;
var b_height = document.body.scrollHeight;
var iframe = document.createElement('iframe');
iframe.src="http://127.0.0.1:8848/webtest/page/cross.html"+ "#" + b_width + "|" + b_height + "|" + iframeId;
iframe.style.display="none";
iframe.id = iframeId
document.body.appendChild(iframe);
});
</script>
</body>
</html>
cross.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>跨域集成頁</title>
</head>
<body>
<script type="text/javascript">
// 獲取到當前路徑上的hash值,並將其賦值給父窗口所在的iframe
window.onload =function (ev) {
var hash_url = window.location.hash;
if(hash_url.indexOf("#")>=0){
var hash_width = hash_url.split("#")[1].split("|")[0]+"px";
var hash_height = hash_url.split("#")[1].split("|")[1]+"px";
var hash_id = hash_url.split("#")[1].split("|")[2];
var iframes =window.parent.parent.document.getElementsByTagName("iframe");
for(var i=0;i<iframes.length;i++){
var currIframe = iframes[i];
if(currIframe.className.indexOf("cross-iframe")>-1 && !currIframe.id){
currIframe.style.height = hash_height;
currIframe.id=hash_id;
}else if(currIframe.className.indexOf("cross-iframe")>-1 && currIframe.id==hash_id){
currIframe.style.height = hash_height;
}
}
}
}
</script>
</body>
</html>