最近一个需求涉及父子页面调用，页面还是不同域下的。
image.png
父页面：(iframe中子页面是在另一域下)
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>iframe父子页面互调</title>
</head>
<body>
<h2>子页面调用父页面的postMessage，来促使父页面数据更新</h2>
<div style="width:400px; height: 200px;">
<iframe src="http://192.168.4.167:8080/child1.html" frameborder="0" style="width:100%; height: 100%;"></iframe>
</div>
<div id="output"></div>
<h2>父页面调用子页面方法</h2>
<button onclick="callChildPageFun()">调用子页面的函数</button>
<div style="width:400px; height: 250px;">
<iframe id="childPage" src="http://192.168.4.167:8080/child2.html" frameborder="0" style="width:100%; height: 100%; display:block"></iframe>
<!--
iframe出现滚动条原因，iframe=inline frame它是一个内联元素，默认是跟baseline对齐的，iframe后边有个看不见、摸不着的**行内空白节点**， 空白节点占据着高度，iframe与空白节点的基线对齐，导致了div被撑开，从而出现滚动条。解决方案
1-设置父div的font-size:0，从而影响空白节点的line-height是0，从而不占据高度。
2-改变iframe的内联元素性质，改为块级元素，display:block
-->
</div>
<script>
window.addEventListener('message', function (e) {
console.log(e.data);
var data=e.data;
if(data.myName){
var output=document.getElementById('output');
output.innerHTML=`新的名字是：${data.myName}`;
}
}, false);
//调用子页面的js函数
function callChildPageFun(){
var obj=[
{"id":"001","name":"jiang0","city":"深圳"},
{"id":"002","name":"jiang1","city":"北京"},
{"id":"003","name":"jiang2","city":"上海"},
{"id":"004","name":"jiang3","city":"广州"},
{"id":"005","name":"jiang4","city":"杭州"}
]
//document.getElementById('childPage').contentWindow.showInfo(obj); //如果是同域下可以直接调js方法
document.getElementById('childPage').contentWindow.postMessage({showInfo:obj},"*");
}
</script>
</body>
</html>
child1.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>子页面</title>
</head>
<body>
<div style="width:300px; height: 180px; border:1px solid #000">
请输入一些值：<input type="text" id="text1" />
<button onclick="sendMessageToParent()">设置</button>
</div>
<script>
function sendMessageToParent () {
//设置test键值下的内容等于input框中的内容
var myName = document.getElementById('text1').value;
window.parent.postMessage({myName:myName},'*');
}
</script>
</body>
</html>
child2.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>子页面</title>
<style>
*{margin:0; padding:0;}
</style>
</head>
<body>
<div id="infoList" style="border:1px solid #f60; height: 250px; box-sizing:border-box">
</div>
<script>
function sendMessageToParent () {
//设置test键值下的内容等于input框中的内容
var myName = document.getElementById('text1').value;
window.parent.postMessage({myName:myName},'*');
}
function showInfo(obj){
if(obj && obj.length){
var container=document.getElementById('infoList');
var html=obj.reduce((prev,cur)=>{
prev+=`<p>用户Id：${cur.id},用户名:${cur.name},城市：${cur.city}</p>`;
return prev;
},'');
container.innerHTML=html;
}
}
window.addEventListener('message', function (e) {
console.log(e.data);
var data=e.data;
if(data.showInfo){
showInfo(data.showInfo);
}
}, false);
</script>
</body>
</html>
网友评论