vom Hinzufügen Ereignis Zuhörer mehrmals

Question

Ich habe ein Office-Add-in denen ein Popup-Browserfenster öffnen, indem

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

Diese Seite wird von Winkel codiert. Um die Kommunikation zwischen dem Add-In und dem Popup zu ermöglichen, habe ich einen Listener im Controller hinzugefügt. Als Ergebnis können sie einander Nachrichten senden durch postMessage.

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

Die Kommunikation funktioniert, außer wenn das Add-In ändert die URL des Popup newUrl (wo newUrl eine andere Seite Instanz ist, die den gleichen Controller verwendet), von

popup.location.href = newUrl 

Optisch Das Popup hat sich geändert, der vorherige Listener wurde jedoch nicht entfernt. Als Ergebnis wird eine vom Add-In gesendete Nachricht empfangen und zweimal behandelt (dh von der neuen Seite und der vorherigen Seite).

Kann jemand den Listener ordnungsgemäß bereinigen, wenn das Add-In die Popup-Seite ändert?

Answer 1

Der Kommentar von Cenk ist korrekt: Die Ereignis-Erase- und Event-Add-Logik muss im genau gleichen Funktionsumfang sein.

also auf der Seite des Add-in, wenn die Popup-Änderungen auf eine andere URL, ich brauche eine close Nachricht von postMessage auf die Seite manuell versenden:

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

Auf der Seite des Popup Seite kann ich den Hörer in den receiveMessage entfernen, weil es immer noch in dem gleichen Seite/Funktionsumfang ist:

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

Answer 2

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