前言
开发中可能会碰到这种情况:当前工程需要嵌入另一个工程的页面,此时两个工程间的通信可能就会碰到js跨域的问题。这里记录一下我的解决方法。
关键
- 使用postMessage发送消息
- 使用addEventListener监听发送过来的消息
实现
父页面代码:
<template>
<div>
<div class="box">
<span>当前页接收的iframe信息:</span>
<span style="color:red;">{{receive}}</span>
</div>
<div class="box">
<el-input placeholder="输入内容向iframe发送" v-model="msg.content" style="width:180px;"></el-input>
<el-button @click="Send">发送</el-button>
</div>
<div style="height:500px">
<iframe
:src="url"
ref="iframe"
style="height: 100%;width:100%; frameborder=no"
frameborder="no"
border="0"
marginwidth="0"
marginheight="0"
></iframe>
</div>
</div>
</template>
<script>
export default {
mounted() {
window.addEventListener("message", event => {
this.receive = event.data.content;
});
},
data() {
return {
url: "http://192.168.1.194:8080/child",
receive: "",
msg: { content: "" }
};
},
methods: {
Send() {
this.$refs.iframe.contentWindow.postMessage(this.msg, "*");
}
}
};
</script>
iframe页面代码:
<template>
<div>
<div class="box">
<span>iframe接收的信息:</span>
<span style="color:red;">{{receive}}</span>
</div>
<div class="box">
<el-input placeholder="输入内容向父页面发送" v-model="msg.content" style="width:180px;"></el-input>
<el-button @click="Send">发送</el-button>
</div>
</div>
</template>
<script>
export default {
mounted() {
window.addEventListener("message", event => {
debugger;
this.receive = event.data.content;
});
},
data() {
return {
receive: "",
msg: { content: "" }
};
},
methods: {
Send() {
window.parent.postMessage(this.msg, "*");
}
}
};
</script>
页面效果:
如果addEventListener多次被调用,可以试试下面这种方法
window.onmessage = function (event) {}