window.postMessage是HTML5中新增的一个API（不能低于IE8）,postMessage方法允许来自不同源的脚
本采用异步方式进行有限的通信 ,使其可以实现跨文本档、多窗口、跨域消息传递，这个API为 window 对象
新增了一个window.postMessage方法，允许跨窗口通信，无论当前两个窗口否是同源。
一、postMessage( val1, val2 )
1 val1：传递的信息对象
2 val2：接受信息的窗口源（origin）协议+域名+端口号，如果设置为” * “表示不限制窗口源，向所有窗口源发送。
二、CODE
- 父级页面给子级页面传参
//a.html
<body>
<div class='body'>
<div class='left'>
<p>LEFT</p>
<button id='iframeEvent'>给子级页面传参</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');
//父级页面发送参数
send.addEventListener('click', function() {
var url = 'http://127.0.0.1:5500/b.html';//地址必须为服务器地址（本地文件打开无效）
var val = '我是父级页面过来的参数';//传递的参数
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>
父页面给子级页面传参.png
- 子级页面给父级页面传参
//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>
//接送参数
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'>给父页面传递参数</button>
<script>
//发送子级页面的参数给父级页面
var btnEvent = document.querySelector('.childPage');
var data = '我是子级页面传递过来的参数';
btnEvent.addEventListener('click', function(e) {
window.parent.postMessage(data, 'http://127.0.0.1:5500/a.html')
}, false)
</script>
</body>
子级页面给父级页面传参数.png
- 完整的两个窗口通信
//a.html
<body>
<div class='body'>
<div class='left'>
<p>LEFT</p>
<button id='iframeEvent'>给子级页面传参</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');
//给子级页面发送消息
send.addEventListener('click', function() {
var val = '我是父级页面过来的参数';
ifr.contentWindow.postMessage(val, 'http://127.0.0.1:5500/b.html')
}, false)
//接送参数
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'>给父页面传递参数</button>
<script>
//接受父级页面传递过来的参数
window.addEventListener('message', function(event) {
var url = 'http://127.0.0.1:5500';
if (event.origin != url) {
return;
}
console.log(event.data);
}, false)
//发送子级页面的参数给父级页面
var btnEvent = document.querySelector('.childPage');
var data = '我是子级页面传递过来的参数';
btnEvent.addEventListener('click', function(e) {
window.parent.postMessage(data, 'http://127.0.0.1:5500/a.html')
}, false)
</script>
</body>
网友评论