广告：宝塔Linux面板高效运维的服务器管理软件 点击【 https://www.bt.cn/p/uNLv1L 】立即购买
这篇文章给大家分享的内容是关于Html5中postmessage实现子父窗口传值的代码有一定的参考价值，有需要的朋友可以从参考一下，希望对你有所帮助。
最近做一个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实现子父窗口传值的代码的详细内容，更多请关注9543建站博客其它相关文章！
发表评论