您好,登錄后才能下訂單哦!
這篇文章主要講解了“Vue怎么使用postMessage實現(xiàn)父子跨域通信”,文中的講解內(nèi)容簡單清晰,易于學(xué)習(xí)與理解,下面請大家跟著小編的思路慢慢深入,一起來研究和學(xué)習(xí)“Vue怎么使用postMessage實現(xiàn)父子跨域通信”吧!
1.子向父通信
parent.html
// 頁面銷毀前,務(wù)必去除監(jiān)聽器,否則會造成資源泄露! beforeDestory () { window.removeEventListener('message', this.listenerFun) } mounted() { window.addEventListener('message',this.listenerFun) } methods: { listenerFun (e) { console.log(e.data); if(e.data.msg==='xxx'){ // 業(yè)務(wù)處理邏輯 } } }
child.html
window.parent.postMessage({ msg:"xxx"},'*');
2.父向子通信
parent.html
var myframe = document.getElementById('myframe') //獲取iframe myframe.contentWindow.postMessage({data:'parent'}, childDomain);//childDomain是子頁面的源(協(xié)議+主機(jī)+端口號)
child.html
window.addEventListener('message', function(e){ console.log(e.data.data); })
注意:
子向父,子postMessage
,父監(jiān)聽message
;
父向子,父postMessage
,子監(jiān)聽message
;
測試發(fā)現(xiàn),子向父postMessage
的時候,源可以寫為‘*
’,父向子postMessage
的時候,源需要寫成子的源,(也就是子頁面的協(xié)議+主機(jī)號+端口);
parent.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>iframe父級頁面</title> <style> * { padding: 0; margin: 0; } iframe { width: 200px; height: 200px; } </style> </head> <body> <h3>我是父級頁面</h3> <button id='btn'>父頁面的按鈕</button> <div id="default">div內(nèi)容</div> <iframe src="http://localhost:8800/child.html" frameborder="0" name='myframe' id='myframe'></iframe> <script language="javascript" type="text/javascript"> window.addEventListener('message',function(e){ console.log(e.data); if(e.data.msg==='hideselfService'){ document.getElementById('default').style.display = 'none'; } }); document.getElementById('btn').onclick= function(){ var myframe = document.getElementById('myframe'); myframe.contentWindow.postMessage({data:'parent'},'http://localhost:8800'); } </script> </body> </html>
child.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>iframe子頁面</title> </head> <body> <h3>我是內(nèi)嵌的子頁面</h3> <button id='btn'>子頁面的按鈕</button> <script> document.getElementById('btn').onclick= function(){ window.parent.postMessage({ msg:"hideselfService" },'*'); } window.addEventListener('message', function(e){ console.log(e.data.data); }) </script> </body> </html>
window.postMessage() 方法可以安全地實現(xiàn)跨源通信。通常,對于兩個不同頁面的腳本,只有當(dāng)執(zhí)行它們的頁面位于具有相同的協(xié)議(通常為https),端口號(443為https的默認(rèn)值),以及主機(jī) (兩個頁面的模數(shù) Document.domain設(shè)置為相同的值) 時,這兩個腳本才能相互通信。window.postMessage() 方法提供了一種受控機(jī)制來規(guī)避此限制,只要正確的使用,這種方法就很安全。
從廣義上講,一個窗口可以獲得對另一個窗口的引用(比如 targetWindow = window.opener),然后在窗口上調(diào)用 targetWindow.postMessage() 方法分發(fā)一個 MessageEvent 消息。接收消息的窗口可以根據(jù)需要自由處理此事件 (en-US)。傳遞給 window.postMessage() 的參數(shù)(比如 message )將通過消息事件對象暴露給接收消息的窗口。
詳情鏈接:postMessage
創(chuàng)建兩個vue項目
項目一:iframe-test-father;
項目二:iframe-test-son
iframe-test-father 組件代碼
<template> <div id="nav"> <div>{{ childMsg }}</div> <router-link to="/">Home</router-link> | <router-link to="/about">About</router-link> <button @click="handleClickFatherToSon">父傳子</button> <iframe ref="iframeRef" id="iframe" src="http://localhost:8080/#/" frameborder="0" ></iframe> </div> <router-view /> </template> <script> export default { data() { return { iframeWin: null, childMsg: "", count: 1, }; }, mounted() { // this.iframeWin = this.$refs.iframeRef.contentWindow; // this.iframeWin = document.getElementById("iframe").contentWindow; window.addEventListener("message", this.handleMessage); }, methods: { handleMessage(event) { const data = event.data.data; if (data) { if (data.code == "success") { // alert(data.test); this.childMsg = data.test; } } }, handleClickFatherToSon() { this.count += 1; document.getElementById("iframe").contentWindow.postMessage( { data: { code: "success", test: "我是父頁面數(shù)據(jù)" + this.count, }, }, "*" ); // this.iframeWin.postMessage( // { // data: { // code: "success", // test: "我是父頁面數(shù)據(jù)" + this.count, // }, // }, // "*" // ); }, }, }; </script>
iframe-test-son組件代碼
<template> <div class="home">test1-home</div> <div>{{ fatherMsg }}</div> <button @click="handleClick">傳遞數(shù)據(jù)</button> </template> <script> export default { name: "Home", data() { return { fatherMsg: "", }; }, mounted() { window.addEventListener("message", this.handleClickMessage); }, methods: { handleClick() { window.parent.postMessage( { data: { code: "success", test: "我是子頁面數(shù)據(jù)", }, }, "*" ); }, handleClickMessage(event) { if (event.data.type != "webpackOk") { const data = event.data.data; if (data.code == "success") { this.fatherMsg = data.test; } } }, }, }; </script>
效果圖
感謝各位的閱讀,以上就是“Vue怎么使用postMessage實現(xiàn)父子跨域通信”的內(nèi)容了,經(jīng)過本文的學(xué)習(xí)后,相信大家對Vue怎么使用postMessage實現(xiàn)父子跨域通信這一問題有了更深刻的體會,具體使用情況還需要大家實踐驗證。這里是億速云,小編將為大家推送更多相關(guān)知識點的文章,歡迎關(guān)注!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。