單擊按鈕時，在所有頁面中顯示警報

Question

這是我的問題的一個基本例子。

我有兩個或更多的html頁面，看起來像

page1.html

<script src='notify.js'></script>
<h2>Page 1</h2>
<button id='btn' onclick='notify();'>Click</button>

page2.html

<script src='notify.js'></script>
<h2>Page 2</h2>

等等..

我的js文件是notify.js

function notify(){
alert("button clicked");
}

在page1.html中 ，有一個button 。 click button ， alert消息應顯示在所有頁面中。 我怎樣才能做到這一點？

在page1.html中 ， alert消息成功顯示。 但是，只要單擊button （在page1.html中 ），我就需要在所有頁面中顯示alert消息。

這就像一個通知過程。 我想有人可以幫助我..

Answer 1

以下任務要求您在頁面中設置一些消息。 您可以使用數據庫來存儲這些消息並附加一個讀取標志。

因此，當單擊page1中的按鈕時，您將觸發一個ajax請求，該請求將新消息寫入數據庫表，如下所示。

$.ajax({url: "/addAlertMessageToDB.php", success: function(result){
       alert("message written to DB");
    }});

然后在您希望顯示警報的每個其他頁面中，您應該有一個JS ajax請求，使用setInterval查找任何新消息

setInterval(function(){ 

    $.ajax({url: "/getLatestMessage.php", success: function(result){
            alert(result);
        }});


}, 3000);

在上面的示例中，您會看到每3秒觸發一次ajax請求，在數據庫中查找新消息。

你的服務器端代碼應該查詢這樣的東西..

select id,message,readFlag from messagesTable where readFlag = false

然后你應該根據數據庫中的消息返回你需要提醒的結果。

Answer 2

如果您在瀏覽器中打開了應用程序的多個選項卡，則無法輕松與他們通信。 它沒有考慮到這個目的而設計，因為瀏覽器中的標簽是在JavaScript發明之后出現的。

可能的解決方案是：

通過Ajax向服務器發送消息，在其他實例中每隔x秒輪詢服務器以查看是否已發送消息。 缺點是您的后端不必要的網絡使用和性能，但易於實現。
使用websockets。 它是為此目的而創建的，但需要時間來理解原理並進行設置。 但這是目前用於Web應用程序“推送”的最佳解決方案。

Answer 3

有不同的方法：

選擇最適合您的選項。 Web套接字，長輪詢，服務器發送事件和永久框架之間的區別 - 單擊此處了解詳細信息。

Answer 4

正如你所說的“通知”，這實際上是在同一域或跨域的頁面之間進行消息傳遞，

如果是這樣： - 那么你必須考慮實時消息，如XMPP，websockets，套接字等過程

每個頁面上有1個列表器和1個發布者

listner將聽取通知並反應發布者將廣播通知（您的按鈕）