为什么 JavaScript“window.postMessage”会创建重复的消息？

Question

我正在尝试打开一个弹出窗口，执行一些操作，然后将消息发送回打开的窗口，以便我可以使用它发送的数据执行更多操作。

本质上，我正在调整此处概述的流程。

这是我在“打开窗口”上的代码。单击社交连接按钮时它会运行。该代码打开一个弹出窗口，并在打开的窗口上分配一个侦听器事件以接收来自弹出窗口的消息：

//Do the operation
let windowObjectReference = null;
let previousUrl = null;

const openSignInWindow = (url, name) => {

    // remove any existing event listeners
    window.removeEventListener('message', receiveMessage);

    // window features
    const strWindowFeatures =
        'toolbar=no, menubar=no, width=600, height=700, top=100, left=100';

    if (windowObjectReference === null || windowObjectReference.closed) {
        /* if the pointer to the window object in memory does not exist
         or if such pointer exists but the window was closed */
        windowObjectReference = window.open(url, name, strWindowFeatures);
    } else if (previousUrl !== url) {
        /* if the resource to load is different,
         then we load it in the already opened secondary window and then
         we bring such window back on top/in front of its parent window. */
        windowObjectReference = window.open(url, name, strWindowFeatures);
        windowObjectReference.focus();
    } else {
        /* else the window reference must exist and the window
         is not closed; therefore, we can bring it back on top of any other
         window with the focus() method. There would be no need to re-create
         the window or to reload the referenced resource. */
        windowObjectReference.focus();
    }

    // add the listener for receiving a message from the popup
    window.addEventListener('message', event => receiveMessage(event), false);

    // assign the previous URL
    previousUrl = url;

};


const receiveMessage = event => {
    // Do we trust the sender of this message? (might be different from what we originally opened, for example).
    if (event.origin !== websiteHomeUrlNoSlash) {
        return;
    }

    const { data } = event;
    console.log(data); //<--- THIS WHERE I'm SEEING DUPLICATES

};

//Invoke the function
openSignInWindow(url, name);

在弹出窗口中，用户登录到他们的社交帐户，然后被重定向到我的应用程序上运行以下代码的页面。该代码将一条消息发送回打开的窗口，然后关闭弹出窗口：

// Get the message data
const messageObj = {
    pluginReason: pluginReasonVar,
    displayName: displayNameVar,
    provider: providerVar,
};

if (window.opener) {
    // send them to the opening window
    window.opener.postMessage(messageObj, websiteHomeUrlNoSlash);
    // close the popup
    if (closePopup) {
        window.close();
    }
}

一切几乎都按预期进行。用户可以登录他们的社交帐户，所有重定向以及弹出窗口的打开和关闭都可以正常工作。

问题：

如果用户多次执行社交连接流程而不刷新页面，则每次运行时打印到控制台的消息数据都会越来越重复。

例如：

• 第一次运行时console.log(data)打印一次。到目前为止，这按预期工作。
• 第二次运行console.log(data)打印两次。它应该只打印一次。
• 第三次运行console.log(data)打印三遍。它应该只打印一次。

每次运行 Social Connect 流程时，它应该只打印一次。但不知何故，它会在每次后续运行中添加重复的副本。

这种重复会不断增加，直到用户刷新页面，页面就会从一开始倒数。

我想在此时进行更多的数据操作，console.log(data)但在每次后续运行时创建重复副本时我无法做到这一点。

我该如何阻止这种情况发生？

也许是因为监听器事件没有分离？如果是这样，我该如何解决这个问题？

Answer 1

您已创建一个匿名方法(event) => { }作为包装器并将其附加到该addEventListener方法。

window.addEventListener('message', event => receiveMessage(event), false);

它不能被删除

window.removeEventListener('message', receiveMessage);

要修复它，请进行如下更改：

window.addEventListener('message', receiveMessage, false);

同时，如果receiveMessage每次关闭窗口时该方法都会丢失，最好将该removeEventListener部分移至receiveMessage.

const receiveMessage = (event)=> {
  window.removeEventListener('message', receiveMessage);
  // do something else
}