window.open在 ios safari中打开新页面失败

上周写一个移动端的小需求，遇到了一个问题：window.open在 ios safari中打开新页面失败。再次记录一下（解决办法在文章最后）。
当时的需求是：在页面A点击按钮，发送一个请求，该请求返回一个url（这个url是一个第三方的网站地址），然后前端用这个url跳转到第三方的页面。
本来是一个挺简单的需求，结果部署之后发现在安卓上一切正常，但是ios手机上有问题：就是点击按钮之后，整个页面没有反应。（其实加了loading效果的话能看到lioading的过程，用抓包工具也能抓到请求，但是请求成功之后就没有下一步动作了）
最初的代码是：

const params = { ... // 请求参数, 这里略过 };
try {
      data.isLoading = true;
      const res: any = await authorizeGetNewUrl(params);
      window.open(res.data);
    } catch {
      data.isLoading = false;
    } finally {
      data.isLoading = false;
    }

就是在then里面写的跳转，然而网上一查发现是：因为 safari 浏览器有一些安全策略，禁止在回调函数中执行window.open方法，以防页面不断弹出窗口。
例如：
有效打开： 如果你是提前获取了文件地址，然后通过点击触发下载就可以生效：
window.open(url)
无效打开： 如果你是先发送请求获取地址，然后请求的成功回调里触发下载就不会生效：
axios.get(‘xxx’).then((url) => {
window.open(url, ‘_blank’);
});
后来尝试用a标签跳转，也失败：

const params = { ... // 请求参数, 这里略过 };
 try {
      data.isLoading = true;
      const res: any = await authorizeGetNewUrl(params);
      const a = document.createElement("a");
      a.target = "_blank";
      a.href = res.data;
      a.click();
    } catch {
      data.isLoading = false;
    } finally {
      data.isLoading = false;
    }

最后解决办法： window.location.href

const params = { ... // 请求参数, 这里略过 };
try {
      data.isLoading = true;
      const res: any = await authorizeGetNewUrl(params);
      window.location.href = res.data;
    } catch {
      data.isLoading = false;
    } finally {
      data.isLoading = false;
    }

希望本文对你有所帮助！