我正在使用 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 里,读完后它们并没有消失。读完之后有什么办法可以清理掉吗?或者我应该在我的事件中添加一个字段来了解我是否已阅读它?
谢谢
编辑:仅当我们使用浏览器箭头返回时才会发生这种情况
最佳答案
我不确定,但除非你调用你的服务,否则你的 postMessage 将永远不会工作。
就我而言,我通常将 addEventListener
放在主模块中,更具体地说,放在 run
方法中。
关于浏览器返回后Javascript清理window.postMessage,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41846831/