iframe跨域通信

目的：系统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>

————————————————
版权声明：本文为CSDN博主「码客斯基」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/qq_24473141/article/details/102579632

posted @ 2020-06-02 16:04 Mr、DIVE 阅读(534) 评论(0) 编辑收藏举报

Mr、DIVE

iframe跨域通信

公告