场景需要：
http://a.com -父页面，记做A http://b.com -子页面，记做B
B生成的DOM，获取DOM的属性，传到A
A监听事件，获取监听的属性，传到B
正文
利用window.postMessage() 方法可以安全地实现跨源通信。通常，对于两个不同页面的脚本，只有当执行它们的页面位于具有相同的协议（通常为https），端口号（443为https的默认值），以及主机 (两个页面的模数 Document.domain设置为相同的值) 时，这两个脚本才能相互通信。window.postMessage() 方法提供了一种受控机制来规避此限制，只要正确的使用，这种方法就很安全。
父页面 A
<template>
<div>
<iframe
:src="iframesrc"
id="a-page"></iframe>
</div>
</template>
<script>
export default {
computed:{
iframesrc:function(){
let iframesrc = "http://b.com"
return iframesrc
}
},
created () {
// 得到B传来的值
window.addEventListener('message',function(e){
console.log("B DOM的高度", e.data)
},false);
// 监听A页面的事件，发送给B
window.addEventListener('scroll', function () {
let iframe = document.getElementById('a-page');
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, '*');
});
}
}
</script>
子页面 B
<template>
<div>
<div id="b-page"></div>
</div>
</template>
<script>
export default {
mounted() {
// 获取到B页面的值，发送给A
let _this = this
let b_pageH = document.getElementById('b-page').scrollHeight;
window.parent.postMessage(b_pageH, '*');
// 得到A页面的值
window.addEventListener('message',function(e){
console.log("e.data.scrollTop", e.data.scrollTop)
console.log("e.data.windowHeight", e.data.windowHeight)
},false);
}
}
</script>
效果
本人不太会录屏，就上截图了
开始因为没获取的值，所以是undefined