Click a button in two pages at once

2019-09-30 22:04发布

问题:

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 web pages at once

app.js

var express = require('express');
var app = express();
var serv = require('http').Server(app);

app.get('/',function(req, res){

        res.sendFile(__dirname + '/client/index.html');
 });
app.use('/client',express.static(__dirname + '/client'));

serv.listen(2000);
console.log("server started");

var SOCKET_LIST ={};

var io = require("socket.io")(serv,{});
io.sockets.on("connection", function(socket){


    socket.id = Math.random();
    SOCKET_LIST[socket.id] = socket;
    console.log("socket connection");

    socket.on('disconnect',function(){
        delete SOCKET_LIST[socket.id];
        console.log("Disconnected");
    });

    socket.on("button",function myFunction() {
    alert("I am an alert box!");
});

    socket.emit('servermsg', $("button").click(function() {
              alert("I am an alert box!");
     }));



});

setInterval(function(){
    for(var i in SOCKET_LIST){
        var socket = SOCKET_LIST[i];
    }
}, 1000/25);

index.html (client)

    <!DOCTYPE html>
<html>
<body>

<script src="https://cdn.socket.io/socket.io-1.4.5.js"></script>
<script>
var socket =io();



socket.emit('button',function myFunction() {
    alert("I am an alert box!");
});

socket.on('servermsg', function(data){
console.log(data.msg);
});
</script>



<p>Click the button to display an alert box:</p>

<button onclick="myFunction()">Try it</button>


</script>

</body>
</html>

回答1:

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

Page # 1:

<button type="button" onclick="hello()">Hello</button>

<script type="text/javascript">
    // window.localStorage.removeItem("text");
    function hello() {
        window.localStorage.setItem("text","Hello there..");
    }
</script>

Page # 2:

<p id="show"></p>

<script type="text/javascript">
    window.addEventListener('storage', storage_event_listener, false);

    function storage_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.



回答2:

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.