java父窗口传值给子窗口_记一次：iframe嵌套网页，利用window.postMessage()实现子父窗口相互传值...

场景需要：

B生成的DOM，获取其属性，传值到A

A监听事件，获取监听的属性，传到B

正文

利用window.postMessage() 方法可以安全地实现跨源通信。通常，对于两个不同页面的脚本，只有当执行它们的页面位于具有相同的协议(通常为https)，端口号(443为https的默认值)，以及主机 (两个页面的模数 Document.domain设置为相同的值) 时，这两个脚本才能相互通信。window.postMessage() 方法提供了一种受控机制来规避此限制，只要正确的使用，这种方法就很安全。

父页面 A

:src="iframesrc"

id="a-page">

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, '*');

});

}

}

子页面 B

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);

}

}

效果

本人不太会录屏，就上截图了

开始因为没获取的值，所以是undefined