通過按鈕點擊在另一個網頁上播放聲音

直接指向我的問題。我有一個像隊列管理系統一樣的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

通過按鈕點擊在另一個網頁上播放聲音

回答

相關問題