一次在两个页面中单击一个按钮
Posted
技术标签:
【中文标题】一次在两个页面中单击一个按钮【英文标题】：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：“连接这两个页面”没有意义，因此您不太可能找到“解决方案”。在这里描述你真正想要完成的事情。很有可能你做错了事，而寻求做错事的方法通常不会顺利。 【参考方案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()，则不会触发存储事件，因为存储区域中实际上没有任何更改。"
因此，在进行实验时，我必须清除我的存储项目才能调用该事件。
【讨论】：
以上是关于一次在两个页面中单击一个按钮的主要内容，如果未能解决你的问题，请参考以下文章
单击按钮，在主视图中的 foreach 语句中一次显示/隐藏部分视图结果