**場景需要：**
http://a.com -父頁面，記做A http://b.com -子頁面，記做B
B生成的DOM，獲取DOM的屬性，傳到A
A監聽事件，獲取監聽的屬性，傳到B
## 正文 ##
利用window.postMessage() 方法可以安全地實現跨源通信。通常，對於兩個不同頁面的腳本，只有當執行它們的頁面位於具有相同的協議（通常為https），端口號（443為https的默認值），以及主機 (兩個頁面的模數 Document.domain設置為相同的值) 時，這兩個腳本才能相互通信。window.postMessage() 方法提供了一種受控機制來規避此限制，只要正確的使用，這種方法就很安全。
#### 父頁面 A ####
```vue
<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 ####
```vue
<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>
```
#### 效果 ####
本人不太會錄屏，就上截圖了
![圖片描述][1]
[1]: /img/bV89Sj
開始因為沒獲取的值，所以是undefined