溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要講解了“Vue怎么使用postMessage實現父子跨域通信”，文中的講解內容簡單清晰，易于學習與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學習“Vue怎么使用postMessage實現父子跨域通信”吧！
1.子向父通信
parent.html
// 頁面銷毀前，務必去除監聽器，否則會造成資源泄露！
beforeDestory () {
window.removeEventListener('message', this.listenerFun)
}
mounted() {
window.addEventListener('message',this.listenerFun)
}
methods: {
listenerFun (e) {
console.log(e.data);
if(e.data.msg==='xxx'){
// 業務處理邏輯
}
}
}child.html
window.parent.postMessage({ msg:"xxx"},'*');2.父向子通信
parent.html
var myframe = document.getElementById('myframe') //獲取iframe
myframe.contentWindow.postMessage({data:'parent'}, childDomain);//childDomain是子頁面的源（協議+主機+端口號）child.html
window.addEventListener('message', function(e){
console.log(e.data.data);
})注意：
子向父，子postMessage,父監聽message;
父向子，父postMessage,子監聽message;
測試發現，子向父postMessage的時候，源可以寫為‘*’，父向子postMessage的時候，源需要寫成子的源，(也就是子頁面的協議+主機號+端口)；
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內容</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>我是內嵌的子頁面</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() 方法可以安全地實現跨源通信。通常，對于兩個不同頁面的腳本，只有當執行它們的頁面位于具有相同的協議（通常為https），端口號（443為https的默認值），以及主機 (兩個頁面的模數 Document.domain設置為相同的值) 時，這兩個腳本才能相互通信。window.postMessage() 方法提供了一種受控機制來規避此限制，只要正確的使用，這種方法就很安全。
從廣義上講，一個窗口可以獲得對另一個窗口的引用（比如 targetWindow = window.opener），然后在窗口上調用 targetWindow.postMessage() 方法分發一個 MessageEvent 消息。接收消息的窗口可以根據需要自由處理此事件 (en-US)。傳遞給 window.postMessage() 的參數（比如 message ）將通過消息事件對象暴露給接收消息的窗口。
詳情鏈接：postMessage
創建兩個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: "我是父頁面數據" + this.count,
},
},
"*"
);
// this.iframeWin.postMessage(
// {
// data: {
// code: "success",
// test: "我是父頁面數據" + this.count,
// },
// },
// "*"
// );
},
},
};
</script>iframe-test-son組件代碼
<template>
<div class="home">test1-home</div>
<div>{{ fatherMsg }}</div>
<button @click="handleClick">傳遞數據</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: "我是子頁面數據",
},
},
"*"
);
},
handleClickMessage(event) {
if (event.data.type != "webpackOk") {
const data = event.data.data;
if (data.code == "success") {
this.fatherMsg = data.test;
}
}
},
},
};
</script>效果圖
感謝各位的閱讀，以上就是“Vue怎么使用postMessage實現父子跨域通信”的內容了，經過本文的學習后，相信大家對Vue怎么使用postMessage實現父子跨域通信這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關知識點的文章，歡迎關注！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
