Question

我使用window.postMessage函数https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage#The_dispatched_event

与角度控制器通信iframe

我的iframe里面的JS就像这一样简单。

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

之后我有角度服务

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内的按钮时，角度服务接收事件的两倍或三倍。就像他们在窗口堆叠一样，看完之后他们就不会消失。读完之后有没有办法清理它？或者我应该在我的活动中添加一个字段来知道我是否已经阅读过它？

谢谢

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

Answer 1

我不确定，但除非您致电您的服务，否则您的postMessage将永远不会有效。

就我而言，我通常会在主模块中添加addEventListener，更具体地说是run方法。

浏览器返回后，Javascript clean window.postMessage

1 个答案: