這里是同域名下,getmessage.html(發送信息)傳遞消息給index.html(收到信息,并回傳收到信息)
index.html頁面
<!DOCTYPE html>
<html><head><meta http-equiv="content-type" content="text/html charset=utf-8"/><title>javascript變量聲明的一些測試</title><link rel="stylesheet" href="styles.css"/></head><body><div id="firstdiv" style="width:900px;text-align: center;border:10px solid blue"><form id="form1" action="" method="post"> <input type="button" name="submit1" value="提交"/></form> <p id="msg"></p></div> </body><script type="text/javascript" src="test.js"></script></html>
這里 是index.html頁面中的test.js代碼
const btn=document.getElementsByName('submit1');btn[0].addEventListener('click',()=>{let popup=window.open('getmessage.html');window.addEventListener('message',function(e){console.log(e);if(e.origin!='http://xuejs.xyz')return;//這里收到發來的信息,并顯示document.getElementById('msg').innerHTML=e.data;e.source.postMessage('收到信息',e.origin);})
});
//這里是getmessage.html頁面
<!DOCTYPE html>
<html><head><meta http-equiv="content-type" content="text/html charset=utf-8"/><title>接收postmessage傳來的信息</title><script type="text/javascript" src="eventutil.js"></script></style></head><body><p id="getmsg">waiting for message...</p></body><script type="text/javascript">//window.opener表示打開getmessage.html頁面的父頁面
//這里用postMessage()傳遞了一條消息給index.htmlwindow.opener.postMessage('super window 接收到一條消息','/');//下面是接收index.html收到頁面后的回傳信息window.addEventListener('message',(e)=>{console.log(e);if(e.origin!='http://xuejs.xyz')return;console.log(e.data);});</script></html>