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

互联网 18-8-6

这篇文章给大家分享的内容是关于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中postmessage实现子父窗口传值的代码

相关资讯

标签推荐