一次点击两页中的一个按钮 [英] Click a button in two 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（服务器已启动）;
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.on（'disconnect'，function（）{
delete SOCKET_LIST [socket.id];
console.log（Disconnected）;
}）;
socket.on（button，function myFunction（）{
alert（I am一个警告框！）;
}）;
socket.emit（'servermsg'，$（button）。click（function（）{
alert（我是一个警告框！）;
}））;
}）;
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'，函数myFunction（）{
alert（我是一个警报框！）;
} ）;
$ b socket.on（'servermsg'，function（data）{
console.log（data.msg）;
}）;
< / script>
< p>点击按钮以显示警告框：< / p>
< button onclick =myFunction（）>试试< / button>
< / script>
< / body>
< / html>
出于好奇心，我刚试过MartinWebb的答案。
第1页：
< button type =buttononclick =hello（）> Hello< / button>
< script type =text / javascript>
// window.localStorage.removeItem（text）;
函数hello（）{
window.localStorage.setItem（text，Hello there ..）;
}
< / script>
页面2：
< p id =show>< / p>
< script type =text / javascript>
window.addEventListener（'storage'，storage_event_listener，false）;
函数storage_event_listener（evt）
{
document.getElementById（show）。innerText = evt.newValue;
// console.log（evt）;
}
< / script>
你可以看到我在我的页面＃1上注释了一行。这是因为存储事件只要调用setItem（），removeItem（）或clear（）并实际更改某些内容，就会在窗口对象上触发。例如，如果将项目设置为其现有值，或者在没有命名键时调用clear（），存储事件不会触发，因为存储区域实际上没有任何变化。
因此，在试验时我必须清除我的存储项目才能调用该事件。
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>
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.
这篇关于一次点击两页中的一个按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
