iOS系统下async异步函数内调用window.open失效的解决方案问询

问题根因 #

iOS Safari自带安全策略限制：只有用户主动交互触发的同步执行上下文中的window.open调用才会被放行，异步回调（包括async/await中await后的执行逻辑、Promise的then回调）已经脱离了用户交互的同步上下文，会被默认判定为恶意弹窗直接拦截，安卓系统无该类限制所以运行正常。
你之前尝试的提前打开空白窗口再异步修改地址的方案失效，是因为iOS对非同步上下文修改外部窗口地址的行为也做了拦截限制。

可行解决方案 #

方案1：使用Capacitor Browser插件（最推荐，无体验折损） #

该方案不需要用户额外触发点击，完全符合产品体验要求，调用逻辑和原生window.open高度一致，且不受Safari弹窗拦截规则限制。
改造代码示例：

// 顶部导入插件
import { Browser } from '@capacitor/browser';

async onCreateStripePortalSession() {
    const returnUrl = `https://myapp.app/goto/${this.tenant.slug}/account`;
    try {
      const session = await this.stripeService.createStripePortalSession(this.member.stripeCustomerId, returnUrl);
      if (session.url) {
        // 替换原有window.open调用即可
        await Browser.open({ url: session.url });
      }
    } catch (err) {
      console.log(err);
    }
}

方案2：预请求资源规避拦截（适合暂不想接入插件的场景） #

如果暂时不想引入新插件，可以将异步请求逻辑前置，在用户点击前预请求Stripe会话缓存，点击时直接在同步上下文中调用window.open打开缓存的地址。如果用户点击时预请求尚未完成，可添加短暂加载态等待请求完成，无需额外增加用户点击步骤。
改造代码示例：

// 定义会话缓存变量
stripePortalSession: any = null;

// 组件初始化、按钮可见/hover时触发预请求
ngOnInit() {
  this.preloadStripeSession();
}

async preloadStripeSession() {
  const returnUrl = `https://myapp.app/goto/${this.tenant.slug}/account`;
  try {
    this.stripePortalSession = await this.stripeService.createStripePortalSession(this.member.stripeCustomerId, returnUrl);
  } catch (err) {
    console.log(err);
  }
}

onCreateStripePortalSession() {
  // 同步上下文调用window.open不会被拦截
  if (this.stripePortalSession?.url) {
    window.open(this.stripePortalSession.url, '_blank');
    // 请求完成后预加载下一次会话
    this.preloadStripeSession();
    return;
  }
  // 未预加载完成时展示加载态等待
  this.presentLoading();
  this.preloadStripeSession().then(() => {
    window.open(this.stripePortalSession.url, '_blank');
    this.dismissLoading();
  })
}

内容的提问来源于stack exchange，提问作者MadMac