Javascript:如果已经打开，如何确保window.open返回相同的窗口

Javascript: How to make sure window.open returns same window, if already opened

本文关键字：open window 确保 返回 窗口 如果 何确保 Javascript      更新时间：2023-09-26

我正在开发一个基于web的应用程序，我必须在其中打开弹出窗口。我使用window.open()方法打开弹出窗口，如下所示：

window.open(url, "popupWin");

其中url包含我希望弹出窗口导航到的url。现在，问题是，如果我从多个选项卡（具有相同或不同的url）执行window.open()，至少在Chrome上，它可能会/可能不会给你以前打开的相同窗口。这种行为是不一致的，我的意思是，要么每次都应该给我新的窗口，要么每次每次都应该让我之前打开的窗口。

我需要为整个域保留相同的弹出窗口。我该怎么做？

看起来有一个方向要走，或者至少要尝试一下。

它完全保留在localStorage上，使您能够在单个域内跨选项卡共享知识。

我在下面给出的代码还不起作用（这只是一个方向），所以不要对运行它抱有太多期望。

它的作用：它通过localStorage中的url保存弹出窗口，当你试图用相同的url打开一个新的弹出窗口时，它不会这么做。如果你不想通过URL来区分它们，那就更简单了：将布尔值存储在localStorage中，而不是对象中。

它不做但应该做的：

  1. 它应该监听弹出的CCD_ 5（关闭）事件并相应地重置CCD_。这里最适合您的只是将您的localStorage boolean值设置为false
  2. 它应该监听当前选项卡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，您也可以在官方文档中找到。

相关文章：