在父级中导航到其他位置后，是否可以在 JavaScript 中重用弹出窗口？

Question

假设我们有一个网站，您在其中单击一个按钮，然后使用 JavaScript 打开一个弹出（子）窗口。因此，我们将父级称为 A，将弹出窗口称为 P。在A的源码中，我们会看到这样的内容：

<script type="text/javascript">
P = window.open('P.html', 'P');
</script>

所以只要A打开，我们就可以在JavaScript中与P交互使用 P 变量。但是，当我单击 A 中的链接转到 B.html 时，我丢失了所有变量。然而我的弹出窗口仍然打开，所以我想知道是否有任何方法可以将两者重新链接在一起。有什么方法可以从B内部操纵P吗？非常感谢。

Answer 1

令我惊喜的是，我发现答案是肯定的。 Mohammad 使用 window.top 的解决方案不正确；当我尝试从 P 内访问 window.top 时，它只会返回对 P 本身的引用。 RobG 的回答有点没有抓住重点。

我发现，如果我在 P 内定期执行此操作，一切都会正常：

<!-- A.html, B.html -->
<script type="text/javascript">
function setP(ref)
{
    P = ref;
}
</script>

<!-- P.html -->
<script type="text/javascript">
function updateParent()
{
    if ( typeof window.opener.setP == 'function' ) {
        window.opener.setP(window);
    }
}
window.setInterval(updateParent, 2000);
</script>

这样，即使我将父窗口从 A 导航到 B ，B 仍将使用对 P 的窗口引用进行更新，一旦建立，两个窗口就可以再次自由地相互通信。

Answer 2

窗口可以访问它打开的子窗口，子窗口也可以访问其打开器窗口。如果其中一个窗口导航到不同域中的新 URI，则另一个窗口将无法再访问其内容。

例如

Opener 窗口 HTML：

<title>Opener window</title>
<script type="text/javascript">

var popWin = (function() {

  var win;

  return {
    open: function() {
      if (!win || win.closed) {
        win = window.open('','child');
        win.document.write(
          '<title>Child window<\/title>' +
          '<script type="text/javascript" src="popWin.js"><\/script>' +
          '<h1>popWin<\/h1>'
        );
      }
      win.document.close();
    },

    close: function() {
      win && win.close();
      win = null;
    }
  };

}());

</script>
<button onclick="popWin.open();">Open child</button>

popWin.js：

window.onload = function() {
   var button = document.createElement('button');
   button.onclick = function() {
     try {
       alert(window.opener.document.title);
     } catch (e) {
       alert('Access to opener failed with error:\n\n' + e.message);
     }
   };
   button.appendChild(document.createTextNode('Check opener'));
   document.body.appendChild(button);
};

如果您打开 opener 文档，则单击按钮将生成一个子窗口。单击子窗口中的按钮将显示打开文档的标题。将打开程序导航到新域，然后单击子窗口中的按钮，您会收到访问被拒绝的错误消息，如下所示：

Permission denied to access property 'document'

Answer 3

如果弹出窗口是最上面的窗口，您可以使用 window.top 从 B 中访问它，这里有一个包含更多详细信息的链接 window.top