iOS In-App 浏览器中 _system 链接失效：问题与解决指南

2024-03-07 15:33:45

iOS In-App 浏览器中的 _system 链接失效：问题与解决方案

简介

在构建集成了 Ionic Capacitor 的 Angular/Java Spring Web 应用程序时，我遇到了一个棘手的问题：在 iOS 设备上的 In-App 浏览器中，使用 _system 目标的外部链接无法正常打开。本文将探讨这个问题并提供有效的解决方案。

问题症状

当我在 iOS 设备上尝试打开一个使用 _system 目标的 Gmail 链接时，外部浏览器并没有如预期的那样加载 Gmail。这给我带来了困惑和不便，因为外部链接对于许多应用程序来说至关重要。

潜在原因

经过调查，我发现 _system 目标在 iOS 上的行为与 Android 上有所不同。在 Android 上，_system 目标会将链接重定向到外部浏览器中打开。然而，在 iOS 上，_system 目标似乎被禁用了，导致链接无法打开。

解决方案

为了解决这个问题，我研究了多种方法，最终找到了两个可行的解决方案：

1. 使用 _blank 目标

一种简单有效的解决方案是将 _system 目标替换为 _blank。通过使用 _blank 目标，链接将在新选项卡或窗口中打开，从而绕过了 iOS 上 _system 目标的限制。

2. 使用 InAppBrowser 插件

另一种解决方案是使用 Ionic Native 的 InAppBrowser 插件。此插件提供了在应用程序内打开浏览器窗口的方法，从而确保外部链接在 iOS 设备上始终如一地打开。

实施解决方案

使用 _blank 目标：

openGmail(): void {
    const emailSubject = 'Subject';
    const emailBody = 'body.';
    const gmailLink = `https://mail.google.com/mail/?view=cm&to=${encodeURIComponent('[email protected]')}&su=${encodeURIComponent(emailSubject)}&body=${encodeURIComponent(emailBody)}`;
    window.open(gmailLink, '_blank');
}

使用 InAppBrowser 插件：

import { InAppBrowser } from '@ionic-native/in-app-browser/ngx';

constructor(private inAppBrowser: InAppBrowser) {}

openGmail(): void {
    const emailSubject = 'Subject';
    const emailBody = 'body.';
    const gmailLink = `https://mail.google.com/mail/?view=cm&to=${encodeURIComponent('[email protected]')}&su=${encodeURIComponent(emailSubject)}&body=${encodeURIComponent(emailBody)}`;
    this.inAppBrowser.create(gmailLink, '_self');
}