什么是postMessage
postMessage是html5引入的API,它允許來自不同源的腳本采用異步方式進行有效的通信,可以實現(xiàn)跨文本文檔,多窗口,跨域消息傳遞.多用于窗口間數(shù)據(jù)通信,這也使它成為跨域通信的一種有效的解決方案.
vue父頁面（嵌入iframe的頁面）
在vue中要使用iframe上的postMessage,首先應該獲取到iframe實例，有以下幾種方式
<iframe :src=“flowSrc” name=“myiframe” ref=“myiframe” id=“myiframe” style=“min-height:800px; width:100%;margin:0;border:0;”> </iframe>
let iframeWin1 = window.frames["myiframe"]; let iframeWin2 = this.$refs.myiframe.contentWindow; let iframeWin3 = document.getElementById("myiframe").contentWindow;
重點： 將iframe的window窗體存儲至data對象中會出現(xiàn)跨域報錯
重點： 將iframe的window窗體存儲至data對象中會出現(xiàn)跨域報錯
重點： 將iframe的window窗體存儲至data對象中會出現(xiàn)跨域報錯
重要的事情說三遍！?。?！
也不要用這個方式刷新iframelet iframeWin2 = this.$refs.myiframe.contentWindow;iframeWin2.location.reload()
這樣操作也會導致跨域
在這里踩坑了，明明postMessage是支持跨域通信的，但是我在用的時候還是報跨域了，原因就是上述所說的。
父頁面?zhèn)鬟f數(shù)據(jù)給子頁面（vue->iframe）
<template>
<div class="home">
<div class="search-container">
<el-input placeholder="請輸入內容" v-model="inputValue" clearable class="mind-input">
</el-input>
<div class="search-btn">
<el-button type="primary" @click="search">搜索</el-button>
</div>
</div>
<div class="ifarm-container">
<iframe :src="flowSrc" name="myiframe" ref="myiframe" id="myiframe" style="min-height:800px; width:100%;margin:0;border:0;"> </iframe>
</div>
</div>
</template>
<script>
export default {
name: 'HomeView',
data() {
return {
inputValue: '',
flowSrc: null,
}
},
created() {
this.flowSrc = 'http://localhost/login'; //直接給flowSrc賦值鏈接
},
mounted() {
// this.passOnIframeData()
},
methods: {
search() {
this.sendMessage(this.inputValue)
},
// 給iframe傳遞數(shù)據(jù)
sendMessage(msg){
let iframeWin = window.frames["myiframe"];
//將iframe的window窗體存儲至data對象中會出現(xiàn)跨域報錯
iframeWin.postMessage(msg,"*");
},
}
}
</script>
<style lang="less" scoped>
.home {
width: 100%;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
.search-container {
display: flex;
align-items: center;
justify-content: space-between;
.mind-input {
width: 500px;
}
.search-btn {
flex: 1;
margin-left: 20px;
}
}
.ifarm-container {
width: 98%;
min-height: 800px;
margin-top: 20px;
border: 1px solid rgb(175, 171, 171);
}
}
</style>
子頁面接收父頁面數(shù)據(jù)（iframe接收vue傳遞過來的數(shù)據(jù)）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>iframe跨域子頁面</title>
</head>
<body>
<div id="mydiv">
vue、iframe、postMessage跨域子頁面
</div>
</body>
<script>
//監(jiān)聽message事件，采用冒泡傳遞方式
window.addEventListener("message",receiveMessage,false);
function receiveMessage(event){
let data = event.data
console.log('我是父頁面?zhèn)鬟f過來的', data)
document.getElementById("mydiv").innerHTML = data;
}
</script>
</html>
子頁面向父頁面?zhèn)鬟f數(shù)據(jù)
在子頁面中使用parent.postMessage或者window.parent.postMessage向父元頁面發(fā)送消息文章來源：http://www.zghlxwxcb.cn/news/detail-425212.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>iframe跨域子頁面</title>
</head>
<body>
<div id="mydiv">
<button onClick="sendMessage">回傳數(shù)據(jù)</button>
</div>
</body>
<script>
function sendMessage(data){
let data = event.data
console.log('我是父頁面?zhèn)鬟f過來的', data)
window.parent.postMessage("回傳數(shù)據(jù)----哈哈哈哈", "*")
}
</script>
</html>
父頁面接收子頁面的數(shù)據(jù)文章來源地址http://www.zghlxwxcb.cn/news/detail-425212.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>跨域父頁面</title>
</head>
<body>
<div id="app">
<iframe name="myiframe" ref="myiframe" id="myiframe" src="http://www.a.com/index.html"></iframe>
</div>
<script>
new Vue({
el: '#app',
data: {
msg: '跨域父頁面',
iframeWin: null,
},
methods: {
//處理接收的消息
receiveMessage(event){
let data = event.data;
console.log('子組件傳遞過來的數(shù)據(jù)', data)
}
},
created(){
window.addEventListener("message",this.receiveMessage,false);
},
//vue實例銷毀時銷毀一些監(jiān)聽事件
destroyed(){
window.removeEventListener("message",this.receiveMessage);
}
})
</script>
</body>
</html>
到了這里，關于vue頁面內嵌iframe使用postMessage進行數(shù)據(jù)交互（postMessage跨域通信）的文章就介紹完了。如果您還想了解更多內容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網(wǎng)！
