使用window.open进行postmessage处理
打开新页面和监听界面的界面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
我是监听界面
<body>
<script>
window.onload = function(){
console.log("onload finish");
if(window.addEventListener){
console.log("onload addEventListener");
window.addEventListener('message', function (e) {
console.log("addEventListener我监听到了");
// if (e.data.act == 'response') {
// alert(e.data.msg.answer);
// } else {
// alert('未定义的消息: ' + e.data.act);
// }
console.log(e.data);
});
}else{
window.attachEvent('onmessage', function (e) {
console.log("attachEvent我监听到了");
// if (e.data.act == 'response') {
// alert(e.data.msg.answer);
// } else {
// alert('未定义的消息: ' + e.data.act);
// }
console.log(e.data);
});
}
}
var popup = window.open("indexopen.html");
popup.onload = function(){
// popup.postMessage("hello there!", "*");
console.log("popup 设置监听");
popup.addEventListener('message', function (e) {
console.log("popup addEventListener我监听到了");
console.log(e.data);
},false);
popup.mydataFunction = function(){
console.log("自定义的函数！");
}
}
</script>
</body>
</html>子界面及发送postmessage界面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
我是发送界面
<button id="sendmsg" onclick="sendMsg()">发送监听</button>
<script>
var targetPost;
function sendMsg(){
console.log("我来发送");
window.postMessage({
act: 'myresponse',
msg:{
name:'zhang'
}
},"*");
window.postMessage({
act: 'response',
msg: {
type:'EOPEN_NOMAL_AGREE_2.0_PC',
answer: '成功'
}
}, '*');
mydataFunction();
}
document.onreadystatechange = function(e){
if(document.readyState == 'complete'){
window.addEventListener('message',function(event){
console.log("index openheml addevent is run");
console.log(event.origin);
console.log(event.data);
console.log(event);
},false);
}
}
// document.onreadystatechange = function(e) {
// if (document.readyState === 'complete') {
// window.addEventListener('message', receiveMessage, false);
// }
// };
// function receiveMessage(event) {
// if (event.origin !== "http://127.0.0.1:5500/indexopen.html") {
// return;
// }
// console.log('message', event.data);
// console.log('origin', event.source);
// targetPost = event;
// // document.write(event.data);
// // 假设你已经验证了所受到信息的origin (任何时候你都应该这样做), 一个很方便的方式就是把enent.source
// // 作为回信的对象，并且把event.origin作为targetOrigin
// // event.source.postMessage("hi there yourself! the secret response " + "is: rheeeeet!", event.origin);
// }
</script>
</body>
</html>使用iframe打开界面进行postmessage
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
我是监听界面
<iframe src="index.html"></iframe>
<body>
<script>
window.onload = function(){
console.log("onload finish");
if(window.addEventListener){
console.log("onload addEventListener");
window.addEventListener('message', function (e) {
console.log("addEventListener我监听到了");
// if (e.data.act == 'response') {
// alert(e.data.msg.answer);
// } else {
// alert('未定义的消息: ' + e.data.act);
// }
console.log(e.data);
});
}else{
window.attachEvent('onmessage', function (e) {
console.log("attachEvent我监听到了");
// if (e.data.act == 'response') {
// alert(e.data.msg.answer);
// } else {
// alert('未定义的消息: ' + e.data.act);
// }
console.log(e.data);
});
}
}
</script>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
我是发送界面
<button id="sendmsg" onclick="sendMsg()">发送监听</button>
<script>
function sendMsg(){
console.log("我来发送");
window.parent.postMessage({
act: 'myresponse',
msg:{
name:'zhang'
}
},"*");
window.parent.postMessage({
act: 'response',
msg: {
type:'EOPEN_NOMAL_AGREE_2.0_PC',
answer: '成功'
}
}, '*');
}
</script>
</body>
</html>