这篇文章主要介绍了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> <h2>The New Window</h2> <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如何实现子父窗口传值内容对大家有帮助,同时也希望大家多多支持创新互联,关注创新互联行业资讯频道,遇到问题就找创新互联,详细的解决方法等着你来学习!
分享文章:Html5中postmessage如何实现子父窗口传值
网站链接:https://www.cdcxhl.com/article6/pdccig.html
成都网站建设公司_创新互联,为您提供网站营销、全网营销推广、移动网站建设、网站建设、定制开发、虚拟主机
声明:本网站发布的内容(图片、视频和文字)以用户投稿、用户转载内容为主,如果涉及侵权请尽快告知,我们将会在第一时间删除。文章观点不代表本网站立场,如需处理请联系客服。电话:028-86922220;邮箱:631063699@qq.com。内容未经允许不得转载,或转载时需注明来源: 创新互联