我正在开发一个基于web的应用程序,我必须在其中打开弹出窗口。我使用window.open()
方法打开弹出窗口,如下所示:
window.open(url, "popupWin");
其中url包含我希望弹出窗口导航到的url。现在,问题是,如果我从多个选项卡(具有相同或不同的url)执行window.open()
,至少在Chrome上,它可能会/可能不会给你以前打开的相同窗口。这种行为是不一致的,我的意思是,要么每次都应该给我新的窗口,要么每次每次都应该让我之前打开的窗口。
我需要为整个域保留相同的弹出窗口。我该怎么做?
看起来有一个方向要走,或者至少要尝试一下。
它完全保留在localStorage
上,使您能够在单个域内跨选项卡共享知识。
我在下面给出的代码还不起作用(这只是一个方向),所以不要对运行它抱有太多期望。
它的作用:它通过localStorage
中的url保存弹出窗口,当你试图用相同的url打开一个新的弹出窗口时,它不会这么做。如果你不想通过URL来区分它们,那就更简单了:将布尔值存储在localStorage中,而不是对象中。
它不做但应该做的:
- 它应该监听弹出的CCD_ 5(关闭)事件并相应地重置CCD_。这里最适合您的只是将您的
localStorage
boolean
值设置为false
- 它应该监听当前选项卡
onunload
(重新加载、关闭)事件,并根据您的逻辑重置某些内容。据我所知,最好的方法是检查这个选项卡是否是您域中的最后一个选项卡(您也可以使用localStorage来完成此操作,例如在每个新选项卡上添加其标识符,例如创建时间戳并在选项卡关闭时销毁它),以及它是否将您的localStorage
boolean
值设置为false
我认为,这足以解决问题。最后是一小段代码:
// get the localstorage url map
function getOpenPopups() {
var obj = localStorage.getItem('mypopups');
return obj ? JSON.parse(obj) : {};
}
// set the localstorage url map
function setOpenPopups(object) {
localStorage.setItem('mypopups', JSON.stringify(object))
}
// open the popup
function popup(url, title) {
var popups = getOpenPopups();
// check whether popup with this url is already open
// if not then set it and open the popup
if (!popups[url]) {
popups[url] = true;
setOpenPopups(popups);
return window.open('abc', 'cde');
}
else {
return false;
}
}
jsFiddle
从w3c文档中,我们可以看到window.open()
返回对新创建的窗口的引用,如果调用失败,则返回null。这意味着我们可以将其保存在内存中,并检查该窗口的closed
标志。
var newWindow = window.open('/some/path', 'TestWindow');
// ...
if (!newWindow.closed) {
}
请记住,若存在以下名称的窗口,页面将加载到同一窗口中,而不打开新窗口。name
参数的其他变体,如_blank、_self、_top、_parent,您也可以在官方文档中找到。