0

我有两个模板，每个模板都包含一个 Vimeoiframe播放器。我正在使用 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')火灾，如预期的那样。

但是，当我导航到使用视频播放器加载另一个模板的页面时，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 消息事件在我已经销毁模板之后以及当我移动到另一个播放器时到达或得到处理？

4

1 回答 1

0

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

// 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 });" 不管用。

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

于 2016-02-03T21:19:39.797 回答