


Code for postmessage in Html5 to implement value transfer between child and parent windows
The content of this article is about the postmessage code in Html5 that implements value transfer between child and parent windows. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.
Recently, I encountered a problem when building a POS terminal. The value transfer problem between the child and parent windows. Because the POS machine has two screens, if a page is stretched and projected, it can be displayed on two screens. , but because it is a touch screen, when the first screen is operating, it will affect the second screen, and vice versa. Now that the requirements are clear and the problem is known, we need two windows to perform different operations
First the parent page:
<!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>
Then the sub-page:
<!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>
Recommended related articles:
html5 video how to achieve real-time monitoring of the current situation Play time (code)
html Combined with the industrial Internet to realize intelligent aircraft control (with code)
The above is the detailed content of Code for postmessage in Html5 to implement value transfer between child and parent windows. For more information, please follow other related articles on the PHP Chinese website!

Hot AI Tools

Undresser.AI Undress
AI-powered app for creating realistic nude photos

AI Clothes Remover
Online AI tool for removing clothes from photos.

Undress AI Tool
Undress images for free

Clothoff.io
AI clothes remover

AI Hentai Generator
Generate AI Hentai for free.

Hot Article

Hot Tools

Notepad++7.3.1
Easy-to-use and free code editor

SublimeText3 Chinese version
Chinese version, very easy to use

Zend Studio 13.0.1
Powerful PHP integrated development environment

Dreamweaver CS6
Visual web development tools

SublimeText3 Mac version
God-level code editing software (SublimeText3)

Hot Topics

This article explains how to embed audio in HTML5 using the <audio> element, including best practices for format selection (MP3, Ogg Vorbis), file optimization, and JavaScript control for playback. It emphasizes using multiple audio f

The article discusses using the HTML5 Page Visibility API to detect page visibility, improve user experience, and optimize resource usage. Key aspects include pausing media, reducing CPU load, and managing analytics based on visibility changes.

This article explains how to create and validate HTML5 forms. It details the <form> element, input types (text, email, number, etc.), and attributes (required, pattern, min, max). The advantages of HTML5 forms over older methods, incl

The article discusses managing user location privacy and permissions using the Geolocation API, emphasizing best practices for requesting permissions, ensuring data security, and complying with privacy laws.

This article details creating interactive HTML5 games using JavaScript. It covers game design, HTML structure, CSS styling, JavaScript logic (including event handling and animation), and audio integration. Essential JavaScript libraries (Phaser, Pi

The article discusses using viewport meta tags to control page scaling on mobile devices, focusing on settings like width and initial-scale for optimal responsiveness and performance.Character count: 159

The article explains how to use the HTML5 Notifications API to display desktop notifications, focusing on permission requirements, customization, and browser support.

This article explains the HTML5 WebSockets API for real-time, bidirectional client-server communication. It details client-side (JavaScript) and server-side (Python/Flask) implementations, addressing challenges like scalability, state management, an
