问题描述
我正在尝试打开一个弹出窗口,做一些事情,然后向打开的窗口发送一条消息,以便我可以用它发送的数据做更多的事情。
基本上,我正在适应 the process outlined here。
这是我在“打开窗口”上的代码。它在点击社交连接按钮时运行。代码打开一个弹出窗口,并在打开窗口上分配一个监听事件来接收来自弹出窗口的消息:
//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,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();
}
}
一切几乎都按预期工作。用户可以登录他们的社交帐户,并且弹出窗口的所有重定向和打开和关闭都正常工作。
问题:
如果用户在没有刷新页面的情况下多次执行 Social Connect 流程,那么每次运行都会越来越多地复制打印到控制台的消息数据。
例如:
- 在第一次运行时,
console.log(data)
被打印一次。到目前为止,这按预期工作。 - 在第二次运行时
console.log(data)
打印两次。它应该只打印一次。 - 在第 3 次运行时
console.log(data)
打印了 3 次。它应该只打印一次。
每次运行社交连接过程时,它应该只打印一次。但不知何故,它会在每次后续运行中添加一个重复的副本。
我想在 console.log(data)
处进行更多的数据操作,但在每次后续运行时都会创建重复副本时我无法这样做。
我如何阻止这种情况发生?
也许是因为监听器事件没有分离?如果是这样,我该如何解决?
解决方法
您创建了一个匿名方法 (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
}