使用postMessage传值
情景:在父项目使用 iframe标签 嵌套子项目时,通常在url上传token等参数,可使用window.postMessage()代替 url 传参
用法 :
http://10.10.0.68:8083
是父项目 地址http://localhost:8081
是子项目 地址
<!-- 父级项目嵌套子项目的页面 http://10.10.0.68:8083 -->
<template>
<div class="home">
<iframe
@load="sendMessage"
id="post2"
src="http://localhost:8081/#/xxxxx"
frameborder="0"
></iframe>
</div>
</template>
<script>
export default {
data(){
return {
popup2:null,
content:"传递的内容"
}
},
created(){
// window.addEventListener("message", this.receiveMessage, false);
},
mounted() {
this.popup2 = document.getElementById("post2").contentWindow; //iframe标签加上 .contentWindow
},
methods: {
sendMessage() {
// this.popup1.postMessage("Test11" , "*"); "*"(表示无限制)
this.popup2.postMessage(this.content , "http://localhost:8081"); //指定地址
},
},
};
</script>
<!-- 子项目页面 http://localhost:8081 -->
<template>
<div class="home">
<h1>{{text}}</h1>
</div>
</template>
<script>
export default {
data() {
return {
text:""
};
},
created() {
window.addEventListener("message", this.receiveMessage, false); //监听事件
},
mounted() {
// window.addEventListener("message", this.receiveMessage, false);
},
methods: {
receiveMessage(event) {
console.log("8081 event", event);
let origin = event.origin || event.originalEvent.origin;
if (origin !== "http://10.10.0.68:8083") return; //过滤指定的 ip地址
this.text = event.data
// 可使用event.source.postMessage() 再传递消息回去
// event.source.postMessage("传递的内容",event.origin);
},
},
};
</script>