记一次：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