脚本宝典收集整理的这篇文章主要介绍了Html5中postmessage实现子父窗口传值的代码，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。这篇文章给大家分享的内容是关于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实现子父窗口传值的代码的详细内容，更多请关注脚本宝典其它相关文章！
以上是脚本宝典为你收集整理的Html5中postmessage实现子父窗口传值的代码全部内容，希望文章能够帮你解决Html5中postmessage实现子父窗口传值的代码所遇到的问题。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。