最近一個需求涉及父子頁面調(diào)用恬惯，頁面還是不同域下的谓形。
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父子頁面互調(diào)</title>
</head>
<body>
<h2>子頁面調(diào)用父頁面的postMessage悯周，來促使父頁面數(shù)據(jù)更新</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>父頁面調(diào)用子頁面方法</h2>
<button onclick="callChildPageFun()">調(diào)用子頁面的函數(shù)</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出現(xiàn)滾動條原因，iframe=inline frame它是一個內(nèi)聯(lián)元素恩静，默認(rèn)是跟baseline對齊的谆焊，iframe后邊有個看不見、摸不著的**行內(nèi)空白節(jié)點**坷剧， 空白節(jié)點占據(jù)著高度劲厌，iframe與空白節(jié)點的基線對齊，導(dǎo)致了div被撐開听隐，從而出現(xiàn)滾動條补鼻。解決方案
1-設(shè)置父div的font-size:0，從而影響空白節(jié)點的line-height是0雅任，從而不占據(jù)高度风范。
2-改變iframe的內(nèi)聯(lián)元素性質(zhì)，改為塊級元素沪么，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);
//調(diào)用子頁面的js函數(shù)
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); //如果是同域下可以直接調(diào)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()">設(shè)置</button>
</div>
<script>
function sendMessageToParent () {
//設(shè)置test鍵值下的內(nèi)容等于input框中的內(nèi)容
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 () {
//設(shè)置test鍵值下的內(nèi)容等于input框中的內(nèi)容
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>
