Click A Button In Two Pages At Once

I have two web pages as follows, when i click a button in one page alert box should be displayed in both pages, How can i achieve this. How can i click two buttons in two different

Solution 1:

If you own the two pages. That means they both sit on the same domain www.adomain.com.

You can do this using local-storage.

On the click event of the first page store a value key in localstorage.

https://developer.mozilla.org/en/docs/Web/API/Window/localStorage

In the second page add an event listener to "hear" the localstorage change.

http://html5demos.com/storage-events

When that event fires click your button

https://www.w3schools.com/jsref/met_html_click.asp

Or Option 2

Use https://www.pubnub.com

This is a drop in io socket msg service. You can get a free account send a message from one page, listen for it on another and react. In your case click the button.

Solution 2:

Out of Curiosity i just tried MartinWebb's answer. I hope it might give you a start.

Page # 1:

<buttontype="button"onclick="hello()">Hello</button><scripttype="text/javascript">// window.localStorage.removeItem("text");functionhello() {
        window.localStorage.setItem("text","Hello there..");
    }
</script>

Page # 2:

<pid="show"></p><scripttype="text/javascript">window.addEventListener('storage', storage_event_listener, false);

    functionstorage_event_listener(evt)
    {
        document.getElementById("show").innerText = evt.newValue;
        // console.log(evt);
    }
</script>

You can see i have commented a line on my page # 1. It is because "The storage event is fired on the window object whenever setItem(), removeItem(), or clear() is called and actually changes something. For example, if you set an item to its existing value or call clear() when there are no named keys, the storage event will not fire, because nothing actually changed in the storage area."

So, while experimenting i had to clear my storage item in order to invoke the event.