window.postMessage是HTML5中新增的一個(gè)API（不能低于IE8）,postMessage方法允許來(lái)自不同源的腳
本采用異步方式進(jìn)行有限的通信 ,使其可以實(shí)現(xiàn)跨文本檔锥累、多窗口、跨域消息傳遞氧急，這個(gè)API為 window 對(duì)象
新增了一個(gè)window.postMessage方法斯辰，允許跨窗口通信帆焕，無(wú)論當(dāng)前兩個(gè)窗口否是同源。
一找田、postMessage( val1, val2 )
1 val1：傳遞的信息對(duì)象
2 val2：接受信息的窗口源（origin）協(xié)議+域名+端口號(hào)歌憨，如果設(shè)置為” * “表示不限制窗口源，向所有窗口源發(fā)送午阵。
二躺孝、CODE
- 父級(jí)頁(yè)面給子級(jí)頁(yè)面?zhèn)鲄?/li>
//a.html
<body>
<div class='body'>
<div class='left'>
<p>LEFT</p>
<button id='iframeEvent'>給子級(jí)頁(yè)面?zhèn)鲄?lt;/button>
</div>
<div class='right'>
<iframe id='ifrA' src="b.html" frameborder="0"
width='100%' height='100%'></iframe>
</div>
</div>
<script>
var ifr = document.getElementById('ifrA');
var send = document.getElementById('iframeEvent');
//父級(jí)頁(yè)面發(fā)送參數(shù)
send.addEventListener('click', function() {
var url = 'http://127.0.0.1:5500/b.html';//地址必須為服務(wù)器地址（本地文件打開(kāi)無(wú)效）
var val = '我是父級(jí)頁(yè)面過(guò)來(lái)的參數(shù)';//傳遞的參數(shù)
ifr.contentWindow.postMessage(val, url)
}, false)
</script>
</body>
//b.html
<body>
<p class='title'>我是子級(jí)頁(yè)面</p>
<script>
window.addEventListener('message', function(event) {
var url = 'http://127.0.0.1:5500';//指定的源
if (event.origin != url) {//判斷是否來(lái)自指定源
return;
}
console.log(event.data);//讀取傳遞過(guò)來(lái)值
}, false)
</script>
</body>
父頁(yè)面給子級(jí)頁(yè)面?zhèn)鲄?png
- 子級(jí)頁(yè)面給父級(jí)頁(yè)面?zhèn)鲄?/li>
//a.html
<body>
<div class='body'>
<div class='right'>
<iframe id='ifrA' src="b.html" frameborder="0"
width='100%' height='100%'></iframe>
</div>
</div>
<script>
//接送參數(shù)
window.addEventListener('message', function(e) {
var url = 'http://127.0.0.1:5500';
if (e.origin != url) {
return;
}
console.log(e.data);
}, false)
</script>
</body>
//b.html
<body>
<button class='childPage'>給父頁(yè)面?zhèn)鬟f參數(shù)</button>
<script>
//發(fā)送子級(jí)頁(yè)面的參數(shù)給父級(jí)頁(yè)面
var btnEvent = document.querySelector('.childPage');
var data = '我是子級(jí)頁(yè)面?zhèn)鬟f過(guò)來(lái)的參數(shù)';
btnEvent.addEventListener('click', function(e) {
window.parent.postMessage(data, 'http://127.0.0.1:5500/a.html')
}, false)
</script>
</body>
子級(jí)頁(yè)面給父級(jí)頁(yè)面?zhèn)鲄?shù).png
- 完整的兩個(gè)窗口通信
//a.html
<body>
<div class='body'>
<div class='left'>
<p>LEFT</p>
<button id='iframeEvent'>給子級(jí)頁(yè)面?zhèn)鲄?lt;/button>
</div>
<div class='right'>
<iframe id='ifrA' src="b.html" frameborder="0"
width='100%' height='100%'>
</iframe>
</div>
</div>
<script>
var ifr = document.getElementById('ifrA');
var send = document.getElementById('iframeEvent');
//給子級(jí)頁(yè)面發(fā)送消息
send.addEventListener('click', function() {
var val = '我是父級(jí)頁(yè)面過(guò)來(lái)的參數(shù)';
ifr.contentWindow.postMessage(val, 'http://127.0.0.1:5500/b.html')
}, false)
//接送參數(shù)
window.addEventListener('message', function(e) {
var url = 'http://127.0.0.1:5500';
if (e.origin != url) {
return;
}
console.log(e.data);
}, false)
</script>
</body>
//b.html
<body>
<p class='title'>我是子級(jí)頁(yè)面</p>
<button class='childPage'>給父頁(yè)面?zhèn)鬟f參數(shù)</button>
<script>
//接受父級(jí)頁(yè)面?zhèn)鬟f過(guò)來(lái)的參數(shù)
window.addEventListener('message', function(event) {
var url = 'http://127.0.0.1:5500';
if (event.origin != url) {
return;
}
console.log(event.data);
}, false)
//發(fā)送子級(jí)頁(yè)面的參數(shù)給父級(jí)頁(yè)面
var btnEvent = document.querySelector('.childPage');
var data = '我是子級(jí)頁(yè)面?zhèn)鬟f過(guò)來(lái)的參數(shù)';
btnEvent.addEventListener('click', function(e) {
window.parent.postMessage(data, 'http://127.0.0.1:5500/a.html')
}, false)
</script>
</body>
