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实现子父窗口传值的代码的详细内容，更多请关注其它相关文章！

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！