重新加载后如何与弹出窗口通信答案

【问题标题】：How to communicate with popup after reload重新加载后如何与弹出窗口通信
【发布时间】：2018-03-22 19:26:57
【问题描述】：

我的页面打开一个弹出窗口并使用 window.postMessage 与它通信。要知道它什么时候准备好，弹出脚本中的第一件事是：

window.opener.postMessage("initialize")

然后我回复并提供数据等等。但是，如果我打开同一页面的两个实例，我会遇到一些问题。在 Chrome 和 Firefox 中，即使设置了 windowName，它实际上也会打开单独的弹出窗口。使用 myPopup.focus() 设置焦点似乎并没有将它们带到顶部。然而在 IE 中它重用了相同的窗口，我最初认为这是一个很大的改进。

As stated in the spec，但是 window.opener 引用永远不会更新，即使另一个父级重新打开它也是如此。这意味着初始代码将与我的第一个实例进行通信。我尝试了各种方式来改变这种行为，但我似乎无法以任何方式在它们之间进行交流。

然后我找到了一种巧妙的检测方法，存储尺寸和位置，然后关闭并重新打开它。它看起来像这样：

const createPopup = (dimensions) => {
  let features = "menubar=0,toolbar=0,status=0,personalbar=0,location=0,resizable=1,scrollbars=1";
  const myPopup = window.open("/imageViewer.html", "ImageViewer", features);
  if (myPopup.opener !== window) {
    dimensions = { height: myPopup.outerHeight, width: myPopup.outerWidth, X: myPopup.screenX, Y: myPopup.screenY };
    myPopup.close();
    return createPopup(dimensions);
  }
  if (dimensions) {
    myPopup.moveTo(dimensions.X, dimensions.Y);
    myPopup.resizeTo(dimensions.width, dimensions.height);
  } else {
    myPopup.focus();
  }

  return myPopup;
};

问题是我的主要用途是当弹出窗口位于辅助监视器上时，似乎不允许将弹出窗口移动到主屏幕尺寸之外。

有没有办法通过使用 postMessage 来解决这个问题？我想到的唯一其他选择是使用本地存储来放置信息并每隔一段时间进行查找，但我对这样的解决方案不太满意。

总而言之，我需要一个函数 (createPopup) 来创建或将辅助窗口/弹出窗口置于前面。主窗口需要能够与之通信，并且在使用同一主页面的不同实例时它必须工作。（但在切换实例时再次运行该函数就可以了。）

【问题讨论】：

window.postMessage 发布到所有打开的标签。

标签： javascript window.open postmessage window.opener

【解决方案1】：

虽然在JavaScript中设置失败，但在 features-parameter 中打开窗口时直接设置时有效：

export const createPopup = (dim) => {
  let features = "menubar=0,toolbar=0,status=0,personalbar=0,location=0,resizable=1,scrollbars=1";
  if (dim) {
    features += ",left=" + dim.X + ",top=" + dim.Y + ",width=" + dim.width + ",height=" + dim.height;
  }
  const myPopup = window.open("/imageViewer.html", "ImageViewer", features);
  try {
    if (myPopup.opener !== window) {
      throw Error("just trying to read opener will throw exception in IE if the opening window has been closed");
    }
  } catch {
    dim = { height: myPopup.outerHeight, width: myPopup.outerWidth, X: myPopup.screenX, Y: myPopup.screenY };
    myPopup.close();
    return createPopup(dim);
  }
  myPopup.focus();

  return myPopup;
};

Focus 似乎仍然无法在基于 chrome 的浏览器中工作，但这确实是一个非常不同的错误。

【讨论】：