在父级中导航到其他地方后，是否可以在 JavaScript 中重用弹出窗口?

2022-01-20 00:00:00 popup javascript

假设我们有一个网站，您在其中单击一个按钮，并使用 JavaScript 打开一个弹出(子)窗口.所以让我们称父级A和弹出窗口P.在 A 的源代码中，我们会看到如下内容:

Suppose we have a website in which you click on a button, and that opens a popup (child) window using JavaScript. So let's call the parent A and the popup P. In the source of A, we'd see something like this:

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

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

So as long as A is open, we can interact with P in JavaScript using the P variable. However, when I click on a link in A to go to B.html, I lose all the variables. Yet my popup window is still open, so I wonder if there's any way I can link the two back together. Is there any way I can manipulate P from within B? Thanks much.

推荐答案

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

Well I figured out that, to my pleasant surprise, the answer is YES. Mohammad's solution of using window.top was not correct; when I try to access window.top from within P, that just returns a reference to P itself. RobG's answer just kind of missed the point.

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

I found that if I do this periodically from within P, everything works:

<!-- 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 仍将使用对 B 的窗口引用进行更新strong>P，一旦建立，两个窗口就可以再次自由地相互通信了.

This way, even when I navigate the parent window from A to B, B will still be updated with a window reference to P and once that's established the two windows can then communicate freely with each other again.

相关文章