postMessage的定義
postMessage是html5引入的API,postMessage()方法允許來自不同源的腳本采用異步方式進行有效的通信,可以實現(xiàn)跨文本文檔,多窗口,跨域消息傳遞.多用于窗口間數(shù)據(jù)通信,這也使它成為跨域通信的一種有效的解決方案.
發(fā)送數(shù)據(jù):
// 父級頁面發(fā)送數(shù)據(jù)
window.postMessage(message, targetOrigin, [transfer]);
window.postMessage(‘要發(fā)送的消息對象’, 可指定目標(biāo)窗口域名也可 '*'發(fā)送到所有窗口);
// 子級頁面發(fā)送數(shù)據(jù)
window.parent.postMessage(data,'*');
// 或
top.postMessage(data,'*');
message
要發(fā)送到其他窗口的數(shù)據(jù),它將會被!結(jié)構(gòu)化克隆算法序列化.這意味著你可以不受什么限制的將數(shù)據(jù)對象安全的傳送給目標(biāo)窗口而無需自己序列化.
targetOrigin
通過窗口的origin屬性來指定哪些窗口能接收到消息事件,指定后只有對應(yīng)origin下的窗口才可以接收到消息,設(shè)置為通配符"*"表示可以發(fā)送到任何窗口,但通常處于安全性考慮不建議這么做.如果想要發(fā)送到與當(dāng)前窗口同源的窗口,可設(shè)置為"/"
transfer | 可選屬性
是一串和message同時傳遞的Transferable對象,這些對象的所有權(quán)將被轉(zhuǎn)移給消息的接收方,而發(fā)送一方將不再保有所有權(quán).
接收數(shù)據(jù)
window.addEventListener('message',e=> {
console.log(e)
});
下面是打印出的結(jié)果 data屬性為傳輸過來的數(shù)據(jù)
image
若用到的地方很多 建議加上 targetOrigin 屬性 并且給數(shù)據(jù)加好type確保數(shù)據(jù)正確的被接收
歡迎對這個有研究、有興趣或者發(fā)現(xiàn)文章有錯誤的地方的伙伴們和我交流,共同進步~~~
