当按下按钮时，如何重新加载单独的页面？

Question

I would like a page to be reloaded when the user press a button on the index.

Here what it looks like...

-index.php

<h1>Press the reload button to reload main.php</h1>
<a class="btn" id="reload">Reload</a>

-main.php

<h1>When the button is pressed on index this page should reload.</h1>

Basically there should be two devises one on index.html and the other on main.html. When the reload button is pressed the other device should reload.

Sorry for the lack of code, I looked and couldn't find anything on this.

Answer 1

If both pages are running in the same browser (and both are not in private/ingonito mode) you can use local storage events.

document.getElementById('reload').addEventListener('click', function (evt) {
   window.localStorage.setItem('window-event', JSON.stringify({reload: "main.php"})); 
});

and in main.php:

window.addEventListener('storage', function (evt) {
    if (evt.key === 'window-event') {
        var msg = JSON.parse(evt.newValue);
        if (msg.reload === 'main.php') {
            window.location.reload();
        }
    }
});

Edit: web workers can also exchange messages between windows, but web workers are more complex to set up and maintain and may fail when dozens of windows are open.