Question

我有两个网页如下，当我点击一个页面中的按钮警告框应该显示在两个页面中，我该如何实现这一点。如何一次单击两个不同网页中的两个按钮

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（客户端）

    <!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>

Answer 1

如果您拥有这两个页面。这意味着他们都坐在同一个域www.adomain.com上。

您可以使用本地存储执行此操作。

在第一页的click事件中，在localstorage中存储一个值键。

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

在第二页中添加一个事件监听器＆＃34;听到＆＃34;本地存储的变化。

http://html5demos.com/storage-events

当该事件触发时，请点击按钮

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

或选项2

使用https://www.pubnub.com

这是io socket msg服务的一个下降。您可以获得一个免费帐户从一个页面发送消息，在另一个页面上听取它并做出反应。在您的情况下，单击按钮。

Answer 2

出于好奇，我刚刚尝试了MartinWebb的回答。我希望它可以给你一个开始。

页面＃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>

第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>

你可以看到我在我的页面＃1上注释了一行。这是因为“每当调用setItem（），removeItem（）或clear（）并实际更改某些内容时，就会在窗口对象上触发存储事件。例如，如果将项目设置为其现有值或在没有命名键时调用clear（），则不会触发存储事件，因为存储区域中实际上没有任何更改。“

因此，在进行实验时我必须清除我的存储项目才能调用该事件。

一次单击两页中的按钮

2 个答案: