子iframe通过a标签跳转到父页面_记一次：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

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

最近做一个POS机终端遇到一个问题，子父窗口传值问题，因为POS机是两个屏幕，如果将一个页面拉长投射虽然可以做到两个屏幕显示，但是因为是触摸屏，当第一个屏幕在操作的时候会影响到第二屏幕，反之也是如此，既然需求明确了，问题也知道了，则我们需要两个窗口进行不同的操作

首先是父页面：

Html5 postMessage

#otherWin {

width: 600px;

height: 400px;

background-color: #cccccc;

}

#txt {

width: 500px;

height: 300px;

background-color: #cccccc;

}

open

send

window.onload = function() {

var btn = document.getElementById('btn');

var btn_send = document.getElementById('send');

var text = document.getElementById('txt');

var win;

btn.onclick = function() {

//通过window.open打开接收消息目标窗口

win = window.open('http://127.0.0.1:8080/mngapp/chatroom/win.html', 'popUp');

}

btn_send.onclick = function() {

// 通过 postMessage 向子窗口发送数据

win.postMessage( document.getElementById("message").value, 'http://127.0.0.1:8080/');

}

if (window.addEventListener) {

//为window注册message事件并绑定监听函数

window.addEventListener('message', receiveMsg, false);

}else {

window.attachEvent('message', receiveMsg);

}

//监听函数，接收一个参数--Event事件对象

function receiveMsg(e) {

console.log("Got a message!");

console.log("Message: " + e.data);

console.log("Origin: " + e.origin);

text.innerHTML = "Got a message!
" +

"Message: " + e.data +

"
Origin: " + e.origin;

}

};

然后再是子页面：

Html5 postMessage

#txt {

width: 500px;

height: 300px;

background-color: #cccccc;

}

The New Window

send

window.onload = function() {

var text = document.getElementById('txt');

var btn_send = document.getElementById('send');

var prent = null;

btn_send.onclick = function() {

// 通过 postMessage 向父窗口发送数据

freceiveMsg(prent);

}

//监听函数，接收一个参数--Event事件对象

function receiveMsg(e) {

console.log("Got a message!");

console.log("Message: " + e.data);

console.log("Origin: " + e.origin);

text.innerHTML = "Got a message!
" +

"Message: " + e.data +

"
Origin: " + e.origin;

//获取父对象

prent = e;

}

function freceiveMsg(e) {

console.log("freceiveMsg:"+e);

e.source.postMessage(document.getElementById("message").value,

e.origin);

}

if (window.addEventListener) {

//为window注册message事件并绑定监听函数

window.addEventListener('message', receiveMsg, false);

}else {

window.attachEvent('message', receiveMsg);

}

};

————————————————

版权声明：本文为CSDN博主「辛末子午」的原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接及本声明。

原文链接：https://blog.csdn.net/hjjoe1213123/article/details/51698404