Question

我的页面中有一个IFrame。我正在使用postmessage在父页面和子页面的脚本之间建立通信。我也有一个极点，可以使用Cookie在所有标签中反映iframe的最小化和最大化状态。

但是问题是我的计数器实际上会在我的子页面发送带有特殊对象的消息时增加。但是消息事件在父页面中触发了多次。如果触发不止一次，则计数器将是错误的。这并非一直发生。有时它可以完美运行，有时却不能。它与极地有关系吗？因为当我发表评论时，一切正常。

这是听众

function listenIframe() {
    var eventMethod = window.addEventListener ? "addEventListener" : "attachEvent";
    var eventer = window[eventMethod];       

    var messageEvent = eventMethod == "attachEvent" ? "onmessage" : "message";

    // Listen to message from child IFrame window
    eventer(messageEvent, function (e) {
        if (e.data == xyz) {
            close();
        } else if (e.data == abcd) {
           //increase Count;
        }
    }, false);
}

这是轮询器

function fn(start) {
    var x, y, z;

    if (start) {
        j.k= setTimeout(function stateChangePollar() {
            // show or hide logic here

            setTimeout(stateChangePollar, 1000);
        }, 1000);
    }
    else {
        clearTimeout(j.k);
    }
}

Answer 1

您的listenIframe何时打电话？可以被多次调用吗？最好的方法是确保它仅被调用一次，否则一种解决方案是将某些内容存储在外部变量中以进行检查，例如：

let isListenerAttached = false;

function listenIframe() {
    if (isListenerAttached) return;
    isListenerAttached = true;

    var eventMethod = window.addEventListener ? "addEventListener" : "attachEvent";
    var eventer = window[eventMethod];       

    var messageEvent = eventMethod == "attachEvent" ? "onmessage" : "message";

    // Listen to message from child IFrame window
    eventer(messageEvent, function (e) {
        if (e.data == xyz) {
            close();
        } else if (e.data == abcd) {
           //increase Count;
        }
    }, false);
}

尽管这不是最佳解决方案，但是通过使用外部变量来处理它很容易造成混乱。特别是如果它将是一个全局变量。最好的解决方案是确保listenIframe仅被调用一次。

Answer 2

这可能是因为 addEventListener 被调用了多次。

所以在您看来，该事件被多次调用，而事实是该事件仅被调用一次，但被处理多次，每个监听器添加一次。

窗口消息事件有时触发多次

2 个答案: