How to communicate between two html pages via JavaScript?
Question
Say I have two html pages and open them in two tabs. I'd like to make them communicate. As example when I click on a button on the first page, then it should call a function that does something on the second page.
function Test() { document.getElementById('test').innerHTML = "Test"; }
<!DOCTYPE html> <html> <head> <script src="index.js"></script> </head> <body> <button onclick="Test()">Click here</button> </body> </html>
And the second page:
<!DOCTYPE html> <html> <head> <script src="index.js"></script> </head> <body> <p id="test"></p> </body> </html>
When I click the button on the first page it should write Test in the p tag on the second page. They can use the same JavaScript file. But how can I achieve this?
2 answers
solution1
3 ACCPTED 2018-04-02 15:22:45
You can't do this with just JavaScript. The point is: JS is a client-side language which means that it is downloaded by a client (a browser) and is run by it (not by server). For the 2 pages to communicate, you have establish the communication somehow, via some medium. The medium can be:
- web itself. 2 clients can communicate directly, but only if they know each others' address. How would they get those? By the help of the server (which brings us to the second option below) or by manual configuration which is very impractical (some more details may be found in context of WebRTC)
- your server. Ok, that's the most common approach but that involves more than just JS: this requires a server-side language (PHP, Python, C++, Java, whatever)
- your browser. There's a special case where you can establish such a communication: if you open your second page in the same browser from your first page in a special way so that the second one is "under control" of the first one, you can "command" the second one to do some stuff from the first one
So, if you're interested in the third option, you should read about window.open , window.opener , window.parent .
var newWindow = window.open(url, name, params);
will open a new window (say your second page) and bring you a variable newWindow which is a reference to the window object of the opened window. Try for instance
newWindow.write("haha, I'm controlling this stuff!");
Likewise, in the second window you can use
var oldWindow = window.opener;
There's also a number of methods you can use ( window``.close , .moveBy , .moveTo , .resizeBy , .resizeTo etc etc).
Remember, however, that this interaction will be limited to your browser: if you change something as it is displayed in your browser (like add some text to a page) this won't affect the actual pages stored on your server because this requires your server do something via some server-side scripts.
PS to advance this technique, you may want to read about window.postMessage but that's mostly designed for communication between pages that are cross-domain.
PPS Actually, there's more!
One thing to note is
localStorageandsessionStoragehavesetItemmethod which generates'storage'events onwindow(trylocalStorage.setItem('key', 'value');andwindow.addEventListener('storage', event => console.log(event.key));).Another, like Anderson Green has noted, is Broadcast Channel API (try
const channel = new BroadcastChannel('my_channel'),channel.postMessage('Hi there!')andchannel.addEventListener('message', event => console.log(event))).There's also
SharedWorkers and Service Workers .Finally, you can use some off-the-shelve solutions like tabs-router , Hermes , Visibility , Duel and SE .
Those who speak Russian may also find more useful details in this article (wow!).
solution2
0 2021-04-21 15:28:48
Try using cookies. It's the simplest way I can think of. This website might seem helpful: https://www.w3schools.com/js/js_cookies.asp
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.