Menu
I'm wanting a JavaScript file to control two HTML files simultaneously.
<!DOCTYPE html>
<html>
<head>
<title>tryAgainPage1</title>
<meta charset="UTF-8">
</head>
<body>
<div id="page1"></div>
<script src="tryAgain.js"></script>
</body>
</html>
That's page one. Next is page two.
<!DOCTYPE html>
<html>
<head>
<title>tryAgainPage2</title>
<meta charset="UTF-8">
</head>
<body>
<div id="page2"></div>
<script src="tryAgain.js"></script>
</body>
</html>
And here is the JavaScript:
newFunction();
function newFunction() {
document.getElementById("page1").innerHTML = "page one says hello";
document.getElementById("page2").innerHTML = "page two says goodbye";
}
Page one is working, page two isn't. I've been trying for a day to get pages talking to each other, without success. I'm not sure I understand how to implement Broadcast channel in this instance (if indeed that is appropriate.) Can anyone help?
856
asked Oct 18 '25 14:10
postMessageIf you're looking for a way to make two pages or tabs communicate you can take a look at:
MDN Window.postMessage, and read this postMessage article
or MDN Broadcast_Channel_API
Using Broadcast Channel API page1 — page2
How it works:
postMessage"message" events and prints the Event.dataAnd vice-versa.
page1.html
<h1>PAGE 1</h1>
<p><button data-broadcast="Page 1 talking!">BROADCAST</button></p>
Page 2 says: <div id="page2"></div>
<script src="comm.js"></script>
page2.html
<h1>PAGE 2</h1>
<p><button data-broadcast="Page 2! 'Allo 'Allo!">BROADCAST</button></p>
Page 1 says: <div id="page1"></div>
<script src="comm.js"></script>
comm.js
var bc = new BroadcastChannel('comm');
document.querySelector("[data-broadcast]").addEventListener("click", ev => {
bc.postMessage( ev.target.dataset.broadcast );
});
const targetEl = document.querySelectorAll("#page1, #page2");
bc.addEventListener("message", ev => {
[...targetEl].forEach( el => el.innerHTML = ev.data );
});
localStorage and the storage EventAnother simple, yet cool way, if both tabs are on the same domain is by using
Window.localStorageMDN and its Storage Event.
How it works:
localstorage[pageX]window will trigger a storage eventlocalstorage[pageX] or better (to make it simpler (and pageN agnostic)) the Event.newValue sent by the storage eventAnd vice-versa.
For starters: DEMO: page1 — page2
page1.html
<h1>PAGE 1</h1>
<textarea data-sender="page1" placeholder="Write to page 2"></textarea>
Page 2 says: <div id="page2"></div>
<script src="comm.js"></script>
page2.html
<h1>PAGE 2</h1>
<textarea data-sender="page2" placeholder="Write to page 1"></textarea>
Page 1 says: <div id="page1"></div>
<script src="comm.js"></script>
comm.js
// RECEIVER
window.addEventListener("storage", ev => {
document.getElementById( ev.key ).innerHTML = ev.newValue;
});
// SENDER
[...document.querySelectorAll("[data-sender]")].forEach( el =>
el.addEventListener("input", ev => localStorage[el.dataset.sender] = el.value )
);
You could use Web RTC (Web Real-Time Communications). A technology which enables Web applications and sites to capture and optionally stream audio and/or video media, as well as to exchange arbitrary data between browsers
Your script was not working on one page... actually on both, the only difference was that on page 1 broke after realizing #page2 Element could not be found - Inversely on the other page broke immediately after realizing there is no "#page1" Element (since first in order).
You should always check if al element exists using if ( someElement ) { /*found!*/ } .
And yes, you cannot make communicate two pages that way. They will only share / include the same JS file.
52
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
