window.postMessage是HTML5中新增的一個API（不能低于IE8）,postMessage方法允許來自不同源的腳
本采用異步方式進行有限的通信 ,使其可以實現(xiàn)跨文本檔、多窗口、跨域消息傳遞，這個API為 window 對象
新增了一個window.postMessage方法，允許跨窗口通信，無論當前兩個窗口否是同源。
一、postMessage( val1, val2 )
1 val1：傳遞的信息對象
2 val2：接受信息的窗口源（origin）協(xié)議+域名+端口號，如果設(shè)置為” * “表示不限制窗口源，向所有窗口源發(fā)送。
二、CODE
- 父級頁面給子級頁面?zhèn)鲄?/li>
//a.html
<body>
<div class='body'>
<div class='left'>
<p>LEFT</p>
<button id='iframeEvent'>給子級頁面?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');
//父級頁面發(fā)送參數(shù)
send.addEventListener('click', function() {
var url = 'http://127.0.0.1:5500/b.html';//地址必須為服務(wù)器地址（本地文件打開無效）
var val = '我是父級頁面過來的參數(shù)';//傳遞的參數(shù)
ifr.contentWindow.postMessage(val, url)
}, false)
</script>
</body>
//b.html
<body>
<p class='title'>我是子級頁面</p>
<script>
window.addEventListener('message', function(event) {
var url = 'http://127.0.0.1:5500';//指定的源
if (event.origin != url) {//判斷是否來自指定源
return;
}
console.log(event.data);//讀取傳遞過來值
}, false)
</script>
</body>
父頁面給子級頁面?zhèn)鲄?png
- 子級頁面給父級頁面?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'>給父頁面?zhèn)鬟f參數(shù)</button>
<script>
//發(fā)送子級頁面的參數(shù)給父級頁面
var btnEvent = document.querySelector('.childPage');
var data = '我是子級頁面?zhèn)鬟f過來的參數(shù)';
btnEvent.addEventListener('click', function(e) {
window.parent.postMessage(data, 'http://127.0.0.1:5500/a.html')
}, false)
</script>
</body>
子級頁面給父級頁面?zhèn)鲄?shù).png
- 完整的兩個窗口通信
//a.html
<body>
<div class='body'>
<div class='left'>
<p>LEFT</p>
<button id='iframeEvent'>給子級頁面?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');
//給子級頁面發(fā)送消息
send.addEventListener('click', function() {
var val = '我是父級頁面過來的參數(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'>我是子級頁面</p>
<button class='childPage'>給父頁面?zhèn)鬟f參數(shù)</button>
<script>
//接受父級頁面?zhèn)鬟f過來的參數(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ā)送子級頁面的參數(shù)給父級頁面
var btnEvent = document.querySelector('.childPage');
var data = '我是子級頁面?zhèn)鬟f過來的參數(shù)';
btnEvent.addEventListener('click', function(e) {
window.parent.postMessage(data, 'http://127.0.0.1:5500/a.html')
}, false)
</script>
</body>
