Question

我正在尝试使用javascript将点击事件从页面转移到另一个页面。我在页面A上有一个带有点击事件的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();
   });
});

Answer 1

您可以使用套接字或本地存储。当其他选项卡进行更改时，本地存储会触发事件。检查此答案https://jsfiddle.net/q10fbesm/

Answer 2

要使用JavaScript将点击事件从页面传输到另一个页面，您可以使用共享工作程序（在我的答案中使用）或服务工作程序。共享工作程序是在后台运行并可与不同页面通信的程序。它在页面之间共享。

使用共享工作人员的要求是;它必须通过安全连接（https或localhost）提供，目标浏览器必须支持共享工作者API

解决问题的一个例子：

a.html

router.get('/companies/:id?', function(req, res, next) {
    var id = req.params.id;
    var company = new Companies(id);
    company.get(() => {
        // We now have the response from our http.get
        // So lets access it now!
        // Or run company.put(function () {...})
        console.log (company.body);
        res.render('companies', {data: company.body});
    });

});

a.js

<!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>

b.html

(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.js

<!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

(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
    });
}());

此处未提供，但需要尝试示例：用于提供静态文件的服务器程序，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

通过javascript

2 个答案: