需求描述
1.有一個網(wǎng)頁A，還有一個vue項目B
2.網(wǎng)頁A中 使用 iframe 的方式引入了vue項目B
3.現(xiàn)在需要在網(wǎng)頁A中 給 vue項目B 發(fā)送消息，讓vue項目B 做出響應(yīng)動作。
案例代碼
iframe 端
這就是一個普通的網(wǎng)頁
<!DOCTYPE html>
<html lang="en">
<head>
<title>測試iframe 給 vue項目發(fā)送消息</title>
<script>
function sendMsg(){
console.log('發(fā)送數(shù)據(jù) begin ')
// 獲取到iframe 對象
var iframe = document.getElementById('abcframe');
// 封裝要發(fā)送的數(shù)據(jù)
var data = {
msg: 'xxx'
};
// 執(zhí)行發(fā)送 ： 主要后面的這個域名地址，如果有端口的話，需要包含端口號！
iframe.contentWindow.postMessage(JSON.stringify(data), 'http://www.abc.com:1234');
console.log('發(fā)送數(shù)據(jù) end ')
}
</script>
</head>
<body>
<!-- 測試按鈕 -->
<button onclick="sendMsg()">點我試試</button>
<br><br>
<!-- 嵌入的 iframe 鏈接 -->
<iframe id="abcframe" src="http://www.abc.com:1234/aa/bb/cc" ></iframe>
</body>
</html>
網(wǎng)頁大致長這樣
文章來源：http://www.zghlxwxcb.cn/news/detail-738370.html
vue端
注意 ： 這里接收事件的代碼要寫在 onMount() 聲明周期鉤子中
主要的就是進(jìn)行事件監(jiān)聽 ：window.addEventListener(‘message’, function(e) {xxxxxx})文章來源地址http://www.zghlxwxcb.cn/news/detail-738370.html
onMounted(() => {
/**
* 監(jiān)聽 企服首頁上面 傳過來關(guān)閉事件
*/
window.addEventListener('message', function(e) {
// 這就是接收到的數(shù)據(jù)
console.log(e.data);
// 接收到之后，再進(jìn)行其他的邏輯處理就可以了
。。。。。。
// 如果還想給 iframe 返回數(shù)據(jù)，請這樣寫
//window.parent.postMessage(JSON.stringify(data), 'http://www.nealyang.cn');
});
})
到了這里，關(guān)于iframe 給嵌入的 vue頁面發(fā)送數(shù)據(jù)（vue2、vue3 都o(jì)k）的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
