從添加事件偵聽器幾次

避免我有一個Office加載項可以通過從添加事件偵聽器幾次

popup = window.open("https://localhost:3000/#/new", "popup", "status=1, location=1, width=1000, height=1200")

此頁由角編碼打開一個彈出瀏覽器窗口。爲了啓用加載項和彈出窗口之間的通信，我在控制器中添加了一個監聽器。因此，他們可以通過postMessage發送消息給對方。

app.controller("Ctrl", ["$scope", "$window", function($scope, $window) { 
    ... ... 
    $window.addEventListener("message", receiveMessage, false); 
}

的通信作品中，當外接改變彈出到newUrl的網址（其中newUrl是使用相同的控制器的另一頁實例），通過

popup.location.href = newUrl

目視除外，彈出窗口已更改，但是先前的偵聽器未被刪除。因此，加載項發送的一條消息會被接收並處理兩次（即通過新頁面和前一頁面）。

有沒有人知道如何正確清理偵聽器，當加載項更改彈出頁面？

來源

2017-04-05 SoftTimur

Cenk的評論是正確的：事件刪除和事件添加邏輯必須在完全相同的功能範圍內。

因此，在外接的一側，當彈出窗口切換到另一個網址，我需要通過postMessage手動發送close消息頁面：

popup.postMessage({ "req": "close" }, popup.location.href); 
popup.location.href = url

在彈出的側面頁面，我可以在receiveMessage刪除監聽器，因爲它仍然是在同一頁/功能範圍：

app.controller("Ctrl", ["$scope", "$window", function($scope, $window) { 
    ... ... 
    var receiveMessage = function (event) { 
     ... ... 
     switch (event.data) { 
      ... ... 
      case "close": 
       $window.removeEventListener("message", receiveMessage, false) 
     } 
    } 
}])

來源

2017-04-10 19:42:45 SoftTimur

this.receiveMessage = function(e){ 
    ... 
} 
$window.addEventListener("message", this.receiveMessage, {once: true, capture: false});

來源

2017-04-05 15:20:48

我不知道爲什麼，我的測試表明聽者仍然存在; 'removeEventListener'並不真的刪除監聽器... – SoftTimur

你能試試嗎？ $ window.addEventListener（「message」，receiveMessage，{once：true，capture：false}）; –

如果您的receiveMessage位於控制器中，那麼每個控制器調用的每個receiveMessage回調都不同於其他控制器調用，因此它永遠不會被刪除。您的事件刪除和事件添加邏輯必須在相同的功能範圍內。 –

從添加事件偵聽器幾次

回答

相關問題