Javascript打开新标签页，并等待其关闭

Question

我想使用JavaScript在我的网站上打开一个新标签页进行银行支付，同时不让主窗口导航离开。

当用户从银行支付返回到返回URL时，我希望能够检测到来自另一个窗口的返回URL的回复（如果可能的话），或者只需通知主窗口交易已完成，并应该检查数据库以获取更新。

我看过几个网站上的这种行为，例如弹出窗口->登录->弹出窗口关闭->主窗口重新加载并加载会话。问题是我不知道这种方法被称为什么，所以我不知道我正在寻找什么关键字。

我确切需要的是这种方法的名称，或者如何实现它（作为JavaScript中的某个特定关键字或其他内容）。

事先感谢。

- Mohammad AbuShady

---

我强烈建议使用模态弹出窗口，而不是新的窗口和标签页。 - Smeegs

我认为你不知道名字的那个系统是OAuth，例如：如何通过OAuth 2.0在弹出窗口中与Google进行身份验证？ - apsillers

@Javalsu使用它要求我的网站需要SSL或一个Iframe，对吧？人们会更放心知道这是URL中的网站，而不是可能是钓鱼的东西。 - Mohammad AbuShady

一个模态弹出窗口似乎比另一个全屏弹出窗口更不容易被钓鱼，至少在我看来是这样。这样你就永远不必离开页面了。 - Charlie

Answer 1

你可以使用window.open()打开一个新页面，然后定期检查窗口是否已关闭。 window.open()返回对打开窗口的引用，您可以使用windowHandle.closed检查它是否已关闭。

btn.onclick = () => {
  const win = window.open(
      'https://www.stackoverflow.com/',
      'Secure Payment');
  const timer = setInterval(() => {
    if (win.closed) {
      clearInterval(timer);
      alert('"Secure Payment" window closed!');
    }
  }, 500);
}

另外，也可以查看这个短演示。

获取更多关于window.open()和最佳实践的信息，请查看MDN。

- gkalpak

---

我使用了window.open，并在新窗口完成后执行了window.close，但仍未实现检查窗口是否被提前关闭的方法。当我到达那部分时，将考虑使用这种方法。 - Mohammad AbuShady

太棒了，我不知道还有这种可能性！！不过，大多数银行认证重定向在确认认证步骤后会重新定向回最初提供的URL。那么，如何具体实现此解决方案以满足问题中提到的用例？当客户确认时，如何关闭银行的确认页面？ - DevelJoe

Answer 2

我发现数据从子窗口传输的最佳方法。

父窗口代码

window.open(url);
await new Promise(resolve => window.addEventListener('custom', resolve));

子代码

if(window.opener) {
  const customEvent = new CustomEvent('custom', { detail: {} });
  window.opener.dispatchEvent(customEvent);
  window.close();
}

- Ivan Zakharchanka

---

谢谢，加入异步后（函数）父代码可以正常工作。 - Prakash Mani

Answer 3

在关闭弹出窗口之前，尝试使用opener.someFunction()来调用打开它的窗口中的函数。请注意，如果用户关闭了第一个窗口，或者将其导航到另一个站点，或者两个窗口因某种原因处于不同的域上，则此操作将失败。

- Niet the Dark Absol

---

谢谢您提供这个方法，但是需要补充一点，如果不在同一个域中，Windows 无法相互通信。我必须等待银行网关返回到我的域上的 URL 才能运行 opener.function()。感谢您的回答。 - Mohammad AbuShady