在javascript中将单击事件从一个页面转移到另一个页面
我正在尝试使用javascript将单击事件从一个页面转移到另一个页面。我在a页上有一个带有点击事件的div，这就是div HTML:在javascript中将单击事件从一个页面转移到另一个页面,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我正在尝试使用javascript将单击事件从一个页面转移到另一个页面。我在a页上有一个带有点击事件的div，这就是div HTML: <div class="play">Play Sound</div> <div class="pause">Stop Sound</div> $(document).ready(function() { var audioElement = document.createElement('audio');
<div class="play">Play Sound</div>
<div class="pause">Stop Sound</div>
$(document).ready(function() {
var audioElement = document.createElement('audio');
audioElement.setAttribute('src', 'audio.mp3');
audioElement.setAttribute('autoplay', 'autoplay');
// audioElement.load()
$.get();
audioElement.addEventListener("load", function() {
audioElement.play();
}, true);
$('.play').click(function() {
audioElement.play();
});
$('.pause').click(function() {
audioElement.pause();
});
});
您可以使用套接字或本地存储。本地存储在其他选项卡进行更改时触发事件。选中此答案要使用JavaScript将单击事件从一个页面转移到另一个页面，您可以使用共享工作程序（在我的答案中使用）或服务工作程序。共享工作程序是在后台运行的程序，可以与不同的页面进行通信。它在页面之间共享 使用共享工作人员的要求如下：；它必须通过安全连接（https或localhost）提供服务，并且目标浏览器必须支持共享工作API 解决您的问题的示例： a、 html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Page A</title>
</head>
<body>
<h1>Page A with controls</h1>
<button id="play">Play Sound</button>
<button id="pause">Stop Sound</button>
<a href="b.html" target="_blank">Open page B</a>
</body>
<script src="a.js"></script>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Page B</title>
</head>
<body>
<h1>Page B with audio element</h1>
</body>
<script src="b.js"></script>
</html>
//sharedworker.js
/*assuming we open page a first, page b second*/
const A = "A";
const B = "B";
let portA;
let portB;
self.addEventListener("connect", function(connectEvent) {
const port = connectEvent.ports[0];
port.addEventListener("message", function(event) {
const data = event.data;
if (data.start) {
if (data.from === A) {
portA = port;
} else {
portB = port;
}
} else {
console.log(data);
portB.postMessage(data);//relay message
}
console.log(`Shared worker memory report
portA, portB: ${portA}, ${portB}`);
});
port.start();
}, false);
另请参见和这怎么可能起作用？单击某个div是否会将用户导航到第B页？或者你希望两个页面同时打开并互相交谈？是的。假设两个页面同时打开，并且可以互相交谈不，不可能是你问的方式。HTML是无状态的，客户端。因此，如果不使用Cookie或服务器上的数据库，一个页面就不知道另一个页面。很好，我可以使用Cookie来实现这一点吗。是的，您可以使用cookies在页面之间传递数据，但它不是异步的。也就是说，要播放音频的第二个页面在重新加载之前不知道cookie是否被更改。
(function () {
const ME = "B";
if (!window.SharedWorker) {
console.log("window.SharedWorker not available");
return;
}
const audioElement = document.createElement('audio');
audioElement.setAttribute('src', 'audio.mp3');
audioElement.setAttribute('autoplay', 'autoplay');
// audioElement.load()
document.body.appendChild(audioElement); // useful ?
audioElement.addEventListener("load", function() {
audioElement.play();
}, true);
const sharedWorker = new SharedWorker("sharedworker.js", "audio");
sharedWorker.port.onmessage = function(event) {
const messageObject = event.data
console.log("received", messageObject);
if (messageObject.hasOwnProperty("play")) {
if (messageObject.play) {
audioElement.play();
} else {
audioElement.pause();
}
}
};
sharedWorker.port.start();
sharedWorker.port.postMessage({
from: ME,
start: true
});
}());
//sharedworker.js
/*assuming we open page a first, page b second*/
const A = "A";
const B = "B";
let portA;
let portB;
self.addEventListener("connect", function(connectEvent) {
const port = connectEvent.ports[0];
port.addEventListener("message", function(event) {
const data = event.data;
if (data.start) {
if (data.from === A) {
portA = port;
} else {
portB = port;
}
} else {
console.log(data);
portB.postMessage(data);//relay message
}
console.log(`Shared worker memory report
portA, portB: ${portA}, ${portB}`);
});
port.start();
}, false);