在javascript中将点击事件从一个页面转移到另一个页面

transfer click event from one page to another in javascript

本文关键字：一个 另一个 转移 javascript 事件      更新时间：2023-09-26

我试图使用javascript从一个页面转移点击事件到另一个页面。在a页有一个带有click事件的div这是div

HTML: 

<div class="play">Play Sound</div>
<div class="pause">Stop Sound</div>

然后在页面B上，我有一个脚本文件，用于接收来自页面A的div的单击。是否有一种方法，我如何才能使它以这样一种方式，如果我单击页A上的div，让页B上的脚本事件在同一应用程序内调用

Javascript: 

$(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;同源选项卡/窗口之间的通信

要使用JavaScript将点击事件从一个页面传输到另一个页面，你可以使用共享worker(在我的回答中使用)或service worker。共享worker是在后台运行的程序，可以与不同的页面进行通信。它在页面之间共享。

使用共享工作线程的要求是;它必须从安全连接(https或localhost)提供，并且目标浏览器必须支持共享的worker 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>

a.js 

(function () {
    const ME = "A";
    if (!window.SharedWorker) {
        console.log("window.SharedWorker not available");
        return;
    }
    const playButtonElement = document.getElementById("play");
    const pauseButtonElement = document.getElementById("pause");
    const sharedWorker = new SharedWorker("sharedworker.js", "audio");
    playButtonElement.addEventListener("click", function (event) {
        sharedWorker.port.postMessage({
            from: ME,
            play: true
        });
    }, false);
    pauseButtonElement.addEventListener("click", function (event) {
        sharedWorker.port.postMessage({
            from: ME,
            play: false
        });
    }, false);
    sharedWorker.port.onmessage = function(event) {
        ;//do nothing here
    };
    sharedWorker.port.start();
    sharedWorker.port.postMessage({
        from: ME,
        start: true
    });
}());

b.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>

研究

(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 

//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);

这里没有提供，但需要尝试示例:提供静态文件的服务器程序，audio.mp3

参见https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API/Using_web_workers和https://developer.mozilla.org/en/docs/Web/API/SharedWorker

相关文章：