Question

直接指向我的问题。我有一个类似队列管理系统的网络应用程序。该应用程序将由教师用于呼叫他们队列中的学生。我的应用程序中有2页我想要彼此连接。第1页是教师登录其帐户的主页。在此页面中有一个按钮[NEXT QUEUE]。第2页是每位教师的实时队列。

当按下第一页中的按钮时，页面2将自动更新下一个队列（使用ajax）。它的行为就像一个聊天应用程序，因此我按照这个简单的教程TUTSPLUS SIMPLE WEB CHAT进行了一些改动，使其在我的网络应用程序中运行。

然后我的问题是当老师按下按钮时如何在第2页发出哔哔声？我找不到教程在其他页面上播放歌曲，我找到的只是同一页面。更简单的解决方案是检查按下的按钮，但我不知道如何在另一个页面中检查它。我是ajax的新手，对我的javascript技巧不那么自豪，所以我只按照上面的教程。

提前谢谢。

Answer 1

您可以使用window.postMessage()在不同的浏览上下文之间进行通信

第1页

<!DOCTYPE html>
<html>   
  <head>
  </head>    
  <body>       
    <button>click</button>
    <a href="page2.html" target="_blank">open page2</a>
    <script>
    var src;
      document.querySelector("button")
      .onclick = function() {
        src.postMessage("clicked", src.location.href);
      }
      window.onmessage = function(e) {
        console.log(e.data);
        src = e.source;
      }
    </script>
  </body>    
</html>

第2页

<!DOCTYPE html>
<html>    
<head>
</head>    
<body>    
  page2
  <script>
    window.onload = function() {
      if (this.opener.location.href === document.referrer) {
        this.opener.postMessage("message from page2", document.referrer)
      }
    }
    window.onmessage = function(e) {
      console.log(e.data);
      var audio = new Audio("/path/to/audio");
      audio.oncanplay = function() {
        this.play()
      }
    }
  </script>
</body>    
</html>

plnkr http://plnkr.co/edit/EsqQ8dPEQZoTHqhvE0Uy?p=preview

通过按钮点击

1 个答案: