浏览器返回后Javascript清理window.postMessage

Question

我正在使用 window.postMessage 函数与 Angular Controller 通信 iframe https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage#The_dispatched_event

我的 iframe 中的 JS 就这么简单。

//Call this function after clicking button
function runOperationFromExternal(operationId){
    console.log('Button clicked');
    window.parent.postMessage({message: {operation: operationId}}, '*');
}

之后我有一个 Angular 服务

var angular = require('angular');

var ListenerActionsServiceModule = angular.module('ui.apps.myApp.service',[

])

.service('listenerActionService', function($window, $rootScope){
    this.$rootScope = $rootScope;

    this.subscribeBeltEvent = function(){
        $window.addEventListener('message', function(event){
            if(event.origin === 'http://localhost:33333') {
                propagateEvent(event);
            }
            else{
                console.log('Origin not allowed');
            }
        }, false);
    };

    function propagateEvent(event) {
        var eventName = 'eventName.';
        var args;
        if(event !== null && typeof event.data.message === 'object') {
            eventName = eventName.concat('complexOperation');
            args = event.data.message.operation;
        }
        else {
            eventName = eventName.concat(event.data.message); 
        }
        $rootScope.$broadcast(eventName, args);
    }
});

module.exports = ListenerActionsServiceModule;

一切工作正常，除了当我第二次或第三次单击 iframe 内的按钮时， Angular 服务接收两倍或三倍的事件。就像它们堆放在 window 里，读完后它们并没有消失。读完之后有什么办法可以清理掉吗？或者我应该在我的事件中添加一个字段来了解我是否已阅读它？

谢谢

编辑:仅当我们使用浏览器箭头返回时才会发生这种情况

Answer 1

我不确定，但除非你调用你的服务，否则你的 postMessage 将永远不会工作。

就我而言，我通常将 addEventListener 放在主模块中，更具体地说，放在 run 方法中。