記一次：iframe嵌套網頁，利用window.postMessage()實現子父窗口相互傳值

場景須要：

• http://a.com -父頁面，記作A
• http://b.com -子頁面，記作B
• B生成的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