window.open() 与 ios 的异步功能不起作用答案

【问题标题】：window.open() with ios for an async function not workingwindow.open() 与 ios 的异步功能不起作用
【发布时间】：2022-01-11 09:04:46
【问题描述】：

到目前为止，在我的应用程序中，所有 window.open 调用在 iOS 上都可以正常工作，但这个调用使用的是异步函数。

有解决办法吗？我花了几个小时从 stackoverflow 尝试各种事情。

我已经看到安装 inAppBrowser 可能会有所帮助，但我还没有尝试过。 https://capacitorjs.com/docs/apis/browser

我还看到将 window.open 放在 click 事件中可能会允许它，但这需要用户再次单击，这并不理想。

它在 Android 上运行良好。

<ion-button type="button" color="primary" expand="block" (click)="onCreateStripePortalSession()">
        Manage my cards
</ion-button>

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) {
        // Go to Stripe Customer Portal
        window.open(session.url, '_blank');
      }
    } catch (err) {
      console.log(err);
    }
  }

编辑：此解决方案不起作用

let wref = window.open();
this.stripeService.createStripePortalSession(...).then(ps => {
  wref.location = ps.url;
});

【问题讨论】：

标签： html ios ionic-framework capacitor

【解决方案1】：

这不是一个很好的解决方案，因为它需要用户单击两个按钮而不是一个按钮。它通过让用户打开 url 而不是在异步函数中调用它来避免这个问题。

如果有人提出更好的解决方案，我会接受。

    const session = await this.stripeService.createStripePortalSession(this.member.stripeCustomerId, returnUrl);
    if (session.url) {
      // Go to Stripe Customer Portal
      this.notificationService.presentAlertWithExternalUrlOption('Manage my Cards', 'Go to Stripe to manage your cards?', 'Lets go', session.url);
    }
    
     presentAlertWithExternalUrlOption(header: string, message: string, routeLabel: string, url: string) {
        this.alertCtrl.create({
          header,
          cssClass: 'ion-alert-custom',
          message,
          buttons: [
            {
              text: 'Cancel',
              role: 'cancel'
            },
            {
              text: routeLabel,
              handler: () => {
                window.open(url, '_blank');
              }
            },
        ]
        }).then(alertEl => {
          alertEl.present();
        });
      }

【讨论】：