php post 父窗口,Html5中postmessage实现子父窗口传值的代码

这篇文章给大家分享的内容是关于Html5中postmessage实现子父窗口传值的代码有一定的参考价值，有需要的朋友可以从参考一下，希望对你有所帮助。

最近做一个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);

}

};

相关文章推荐：