在 Firefox 和 Safari 中的异步函数中使用 window.open

Question

我开发的应用程序在用户身份验证方面与一些具有严格安全策略的平台集成，因此我们这边的身份验证也必须以不同的方式处理。这里的细节并不是非常重要。

我现在正在开发一项新功能，用户可以从列表中打开一些项目，但从用户体验的角度来看，在新选项卡中打开这些项目是最有意义的，因为用户希望在一次，而无需导航回列表并再次在其中找到它们的位置。

因此，为了使其正常工作，我们的 API 有一个redirects处理身份验证的端点。实现细节并不重要，重要的是要知道此端点将接收应该导航到的 URL（从我们的 UI 提供），并且它将返回带有令牌的重定向 URL。

因此，我使用了以下函数，当用户单击按钮时会调用该函数

async function openInNewTab() {
  // $ajax is an axios instance that calls the endpoint
  const { url } = await $ajax.post('/redirects', {
    data: {
      url: "myurl.com/route/to/go/to",
      //...
    }
  });

  window.open(url)
}

正如您所看到的，它非常简单，它从我们的 API 获取重定向 URL 并尝试在新选项卡中打开该 URL。这在 Chrome 中有效，但在 Firefox 或 Safari 中不起作用，提示用户弹出窗口被阻止。

我很清楚浏览器有许多关于弹出窗口以及何时阻止它们的规则，但是在这种情况下，此操作是由用户通过单击按钮交互启动的，唯一的问题是调用的函数是异步的。

有什么方法可以在 Firefox 和 Safari 中实现此功能吗？如果没有异步功能，该函数在实际网络速度下就无法很好地工作，并且按照我们应用程序的工作方式，我们无法使用target="_blank"链接中的 a 等内容来绕过重定向 URL，否则将无法正确进行身份验证。

Answer 1

我最终找到了两种潜在的解决方法。

它们都非常相似，但从我的测试来看，Safari 在将事件解析为弹出窗口方面似乎是最严格的。

它适用于所有主要浏览器（基于 Chromium 的浏览器、Firefox 和 Safari），但感觉有点老套。

在这里找到这个：https ://stackoverflow.com/a/70463940/8610114

const { url } = await $ajax.post('/redirects', {
  data: {
    url: "myurl.com/route/to/go/to",
    //...
  }
});

setTimeout(() => {
  window.open(url, "_blank");
});

还有另一种解决方案，尽管这个解决方案似乎在 Safari 中并不一致，因为它有时会被阻止（似乎是随机的）

const newWindow = window.open('about:blank', '_blank');

const { url } = await $ajax.post('/redirects', {
  data: {
    url: "myurl.com/route/to/go/to",
    //...
  }
});

newWindow.location.href = url;