在父级中导航到其他地方后,是否可以在 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.

相关文章