zoukankan html css js c++ java

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

查看全文

相关阅读:
Max History CodeForces
Buy a Ticket CodeForces
AC日记——字符串的展开 openjudge 1.7 35
AC日记——回文子串 openjudge 1.7 34
AC日记——判断字符串是否为回文 openjudge 1.7 33
AC日记——行程长度编码 openjudge 1.7 32
AC日记——字符串P型编码 openjudge 1.7 31
AC日记——字符环 openjudge 1.7 30
AC日记——ISBN号码 openjudge 1.7 29
AC日记——单词倒排 1.7 28

原文地址：https://www.cnblogs.com/DIVEY/p/13031842.html