通过按钮点击在另一个网页上播放声音

直接指向我的问题。我有一个像队列管理系统一样的Web应用程序。该应用程序将被老师用来在队列中调用一个学生群。我的应用中有2个页面，我想互相连接。第1页是老师登录他们的帐户的主页。在这个页面中有一个按钮[NEXT QUEUE]。第2页是每个老师的实时排队。通过按钮点击在另一个网页上播放声音

当按下页面1中的按钮时，页面2会自动更新下一个队列（使用ajax）。它的行为就像一个聊天应用程序，所以我遵循这个简单的教程TUTSPLUS SIMPLE WEB CHAT，并稍作改动，使其在我的网络应用程序。

然后，我的问题是当教师按下按钮时，如何在第2页播放哔声？我找不到在其他页面播放歌曲的教程，我发现的只是同一个单独的页面。更简单的解决方案将检查按钮按下，但我不知道如何检查，如果它在另一个页面。我在Ajax非常新手，并没有如此自豪与我的JavaScript技能，所以我只遵循上面的教程。

预先感谢您。

来源

2016-11-13 David Dalvin

可以使用'的postMessage（）'到浏览上下文之间进行通信。 – guest271314

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

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

来源

2016-11-13 10:05:54 guest271314

通过按钮点击在另一个网页上播放声音

回答

相关问题