删除 Template.onDestroyed 中的窗口事件侦听器

Question

我有两个模板，每个模板都包含一个 Vimeo iframe 播放器。我正在使用 FlowRouter 通过主布局上的{{> Template.dynamic template=main}} 呈现模板。

在这两个模板中，我在 onCreated 中添加了视频事件的侦听器

Template.view.onCreated( function() {
    var self = this;

    if (window.addEventListener) {
        window.addEventListener('message', function(event) {
            viewMessageReceived(event, self)}, false);
    } else {
        window.attachEvent('onmessage', function(event){
            viewMessageReceived(event, self)}, false);
    }
});

并在onDestroyed 中销毁它们

Template.view.onDestroyed( function() {
    if (window.removeEventListener) {
        console.log('view remove');
        window.removeEventListener('message', function(event) {
            viewMessageReceived(event, self)}, false);
    } else {
        window.detachEvent('onmessage', function(event){
            viewMessageReceived(event, self)}, false);
    }
});

这是匿名事件处理程序调用的函数：

function viewMessageReceived(event, self) {
// Handle messages from the vimeo player only
    if (!(/^https?:\/\/player.vimeo.com/).test(event.origin)) {
        return false;
    }

    if (self.playerOrigin === '*') {
        self.playerOrigin = event.origin;
    }

    var data = JSON.parse(event.data);

    switch (data.event) {
        case "ready":
            initializePlayer(self);
            break;
        case "playProgress":
            self.playerTime.set(data.data.seconds);
            if (self.duration === '*') self.duration = data.data.duration;
            break;
        case "play":
            self.playerStatus.set("playing");
            break;
        case "pause":
            self.playerStatus.set("paused");
            break;
    }
}

当我切换到不同的模板时，onDestroyed 运行并且我的console.log('view remove') 触发，正如预期的那样。

但是，当我导航到使用视频播放器加载另一个模板的页面时，previous 视频模板中的事件处理程序会收到一个 Vimeo“playProgress”message，应该是不久前被删除的。这会引发错误，因为之前的模板已被销毁。

Uncaught TypeError: Cannot read property 'contentWindow' of undefined

来自这个函数的最后一行：

function post(template, action, value) {
    console.log('view action: %s value: %s', action, value);
    var data = {method: action};
    if (value) data.value = value;
    var message = JSON.stringify(data);
    template.player[0].contentWindow.postMessage(message, template.playerOrigin);
}

每个包含视频的模板都有自己的 .js 文件，因此它们都有自己的 post 函数声明。我的理解是定义一个函数，该函数的范围仅限于页面。

只有一条消息发给了错误的玩家。之后，它们到达当前加载的播放器。

为什么在我已经销毁模板以及移动到另一个播放器之后，Vimeo 消息事件会到达或得到处理？

Answer 1

W3Schools 网站上关于removeEventListener() 方法的引用：

// Attach an event handler to <div>
document.getElementById("myDIV").addEventListener("mousemove", myFunction);

// Remove the event handler from <div>
document.getElementById("myDIV").removeEventListener("mousemove", myFunction);

注意：要删除事件处理程序，使用 addEventListener() 方法必须是一个外部函数，就像在 上面的示例 (myFunction)。

匿名函数，例如 "element.removeEventListener("event", function(){ myScript });" 不起作用。

为此，您需要将函数定义移到onRendered 和onDestroyed 事件之外的某个位置，并在添加/删除事件侦听器中传递函数名称。