一次在两个页面中单击一个按钮答案

【问题标题】：Click a button in two pages at once一次在两个页面中单击一个按钮
【发布时间】：2017-08-18 11:57:42
【问题描述】：

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

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>

【问题讨论】：

您要解决的根本问题是什么？
这意味着是什么意思？这两个页面有什么关系？你到底想在这里完成什么？
@David 我不知道如何连接这两个页面，所以寻求解决方案。
这些页面是否显示在 iframe 中？
@vamshi：“连接这两个页面”没有意义，因此您不太可能找到“解决方案”。在这里描述你真正想要完成的事情。很有可能你做错了事，而寻求做错事的方法通常不会顺利。

标签： html node.js button socket.io click

【解决方案1】：

如果您拥有这两个页面。这意味着它们都位于同一个域 www.adomain.com。

您可以使用本地存储来做到这一点。

在第一页的点击事件中，在本地存储中存储一个值键。

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

在第二个页面中添加一个事件监听器来“听到”本地存储的变化。

http://html5demos.com/storage-events

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

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

或选项 2

使用https://www.pubnub.com

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

【讨论】：

或者如果你想获得真正的流畅添加pubnub实时api，创建一个频道，在第二页收听，获取消息，点击按钮。 www.pubnub.com
这是一个不错的解决方案。

【解决方案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()，则不会触发存储事件，因为存储区域中实际上没有任何更改。"

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

【讨论】：