<iframe :src="iframesrc" id="myIframe" ref="myIframe" width="100%" :height="myIframeHeight" frameborder="0" :onload="autoHeight()"></iframe>
A页面
export default {
data() {
return {
myIframeSrc:undefined,
myIframeHeight: 50,
myIframeSrc: "",
temHeight:0,
}
},
computed:{
iframesrc:function(){
//let iframesrc = "http://localhost:9524/tmp-screen/index.html"
let iframesrc = window.location.protocol+'//'+window.location.host+'/tmp-screen/index.html';
return iframesrc
}
},
watch: {
myIframeHeight(newValue, oldValue) {
// console.log(newValue, oldValue,"A页面——————————————————————————-")
this.myIframeHeight = newValue
},
},
created() {
// 得到B传来的值
window.addEventListener('message', function (e) {
this.temHeight = e.data
this.myIframeHeight = e.data
// console.log("B DOM的高度", this.myIframeHeight)
document.getElementById('myIframe').height=this.myIframeHeight+"px"
}, false);
// 监听A页面的事件,发送给B
window.addEventListener('scroll', function () {
let iframe = document.getElementById('myIframe');
if (!iframe) {
return;
}
// 下拉距离
let scrollTop = window.pageYOffset ||
document.documentElement.scrollTop ||
document.body.scrollTop ||
0;
// 窗口高度
let windowHeight = window.innerHeight ||
document.documentElement.clientHeight ||
document.body.clientHeight;
let json = {
scrollTop: scrollTop,
windowHeight: windowHeight,
};
iframe.contentWindow.postMessage(json, '*');
});
},
}
B页面
data() {
return {
Bdata:-1,
}
},
mounted() {
// 获取到B页面的值,发送给A
let _this = this
let b_pageH = document.getElementById('app').scrollHeight;
this.Bdata = b_pageH;
window.parent.postMessage(this.Bdata, '*');
// 得到A页面的值
window.addEventListener('message', function (e) {
// console.log("e.data.scrollTop", e.data.scrollTop)
// console.log("e.data.windowHeight", e.data.windowHeight)
}, false);
window.addEventListener("load", function () {
let b_pageH = document.getElementById('app').scrollHeight;
window.parent.postMessage(b_pageH, '*');
});
}
浙公网安备 33010602011771号