方法一 vue
父传子
<iframe
class="compare-item"
title="对比一"
id="iframe1"
ref="iframe1"
:src="iframItem1"
:key="iframItem1"
@load="iframeOnload('iframe1')"
></iframe>
let t = new Date().getTime();
this.iframItem1 = arr[0]+ "&t="+t;
this.iframItem2 = arr[1]+ "&t="+t;
iframeOnload(id) {
let iframe = this.$refs[id];
let obj = { onlineType: "single",isTitle: true};
iframe.contentWindow.postMessage(obj, "*");
},
子级
mounted(){
//怎样监听iframe传过来的信息
window.addEventListener("message", this.handleMessage);
},
handleMessage(msg){
if(!!msg.data.onlineType){
this.onlineType = msg.data.onlineType
if(!!msg.data.isTitle){
this.onlineTitle = msg.data.isTitle
}
}
},
unMounted(){
window.removeEventListener("message", this.handleMessage)
}
子传父
子级
// iframe 传给父级用 年鉴和年鉴对比用
window.parent && window.parent.postMessage({'isFull':true},'*')
//父 iframe
window.addEventListener('message', (e) => {
console.log(e.data.isFull);
});
