最近做一个pos机终端遇到一个问题，子父窗口传值问题，因为pos机是两个屏幕，如果将一个页面拉长投射虽然可以做到两个屏幕显示，但是因为是触摸屏，当第一个屏幕在操作的时候会影响到第二屏幕，反之也是如此，既然需求明确了，问题也知道了，则我们需要两个窗口进行不同的操作
首先是父页面：
<!doctype html><html><head><meta charset="utf-8"><title>html5 postmessage</title><style>#otherwin {width: 600px;height: 400px;background-color: #cccccc;}#txt {width: 500px;height: 300px;background-color: #cccccc;}</style></head><body><button id="btn">open</button><button id="send">send</button><input type="text" id="message" /><br/><br/> <p id="txt"></p><script>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!<br>" +"message: " + e.data +"<br>origin: " + e.origin;}};</script></body></html>
然后再是子页面：
<!doctype html><html><head><meta charset="utf-8"><title>html5 postmessage</title><style>#txt {width: 500px;height: 300px;background-color: #cccccc;}</style></head><body><h1>the new window</h1><p id="txt"></p><input type="text" id="message" /><button id="send">send</button><script> 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!<br>" +"message: " + e.data +"<br>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);}};</script></body>
相关文章推荐：
html5 video如何实现实时监测当前播放时间（代码）
html结合工业互联网实现智能飞机控制（附代码）
以上就是html5中postmessage实现子父窗口传值的代码的详细内容。