How to use js to communicate between two html windows

Scenario: When page A opens page B, after operating on page B, page A needs to synchronize the changed data

Page A, http://127.0.0.1:10001/A.html

var domain = 'http://127.0.0.1:10001';

window.open('http://127.0.0.1:10001/B.html');
window.addEventListener('message', function (event) {
    if (event.origin !== domain) return;
    console.log('message received: ' + event.data, event);
}, false);

B page, http://127.0.0.1:10001/B.html, opener is the reference to the opener of the current window

var domain = 'http://127.0.0.1:10001';
window.opener.postMessage("success", domain);
window.close();

If A needs to open B and send data to B at the same time

// Sending data var domain = 'http://127.0.0.1:10001';
var myPopup = window.open('http://127.0.0.1:10001/B.html');
myPopup.postMessage('data', domain);

// Receive data window.addEventListener('message', function(event) {
    if(event.origin !== 'http://127.0.0.1:10001') return;
    console.log('message received: ' + event.data,event);
},false);

The above is the details of how to use js to communicate between two html windows. For more information about js communication between two html windows, please pay attention to other related articles on 123WORDPRESS.COM!

You may also be interested in:

Detailed explanation of JS homology strategy and CSRF
Detailed explanation of JavaScript homology policy and cross-domain access examples
Ajax and homology strategy implemented by JS (example explanation)
Detailed explanation of js homology strategy
EventBus in JavaScript implements communication between objects
A brief discussion on the pitfalls of real-time communication using vue websocket nodeJS
Detailed explanation of custom events for Vue.js component communication
SpringBoot implements jsonp cross-domain communication method example
Detailed code example of how Vue.js child components communicate with parent components
The process of using SockJS to implement webSocket communication in vue
How to implement same-origin communication in JavaScript

<<: Analyze Mysql transactions and data consistency processing issues

>>: Win10 DVWA download, installation and configuration graphic tutorial detailed explanation (novice learning penetration)