父页面：
<html>
<body>
<h2>page A</h2>
<h1 class="header">page A</h1>
<div class="mb20">
<button style="font-size:20px;" onclick="send()">post message</button>
</div>
<!-- 跨域的情况 -->
<iframe src="http://localhost:8880/#/login" name="frmName" style="display: none; "></iframe>
<script>
//发送消息给子页面
function send() {
var data = {};
//我用这个来作为某类消息
data.msgType = "login";
data.a1="hello";
//iframe的src需要和下面第二个参数的域相同，不然会有错误信息在控制台
window.frames['frmName'].postMessage(data, 'http://localhost:8880/#/login'); // 触发跨域子页面的messag事件
}
var varWindow = window;
//接收子页面返回的消息(注意：这个listen也可以接受其它页面postmessage过来的消息)
window.addEventListener('message', function(messageEvent) {
var data = messageEvent.data;
console.info('message from child:', data);
varWindow.open('http://localhost:8880/#/dashboard');
}, false);
</script>
</body>
</html>
子页面：只要有addEventListener即可
window.addEventListener('message', function(ev) {
var data = ev.data;
console.info('message from parent:', data);
//一般这类有特殊用途的，都加个msgType，这样可以过滤掉其它postmessage。目前还不得而知是否有聪明点的办法
if(data.msgType!=null && data.msgType === 'login'){
//登录操作，保存登录信息到local storage，然后父页面window.open到Index页面，即可完成跨域登录
parent.postMessage("OK", 'http://localhost:8080/');
}
}, false);
网友评论