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

Question

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

window.open(url, "popupWin");

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

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

Answer 1

好吧，看起来有一个前进的方向，或者至少试一试。

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

我在下面给出的代码还不能工作(这只是一个方向)，所以不要对按原样运行它抱有太大期望。

它的作用:它通过 url 将弹出窗口保存在 localStorage 中，当您尝试打开一个具有相同 url 的新弹出窗口时，它不会这样做。如果您不想通过 URL 区分它们，那就更简单了:将 bool 值存储在 localStorage 而不是对象中。

它不应该做什么:

1. 它应该监听弹出的 onunload(关闭)事件并相应地重置 localStorage 信息。最适合您的方法是将 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