iOS Chrome自定义URL跳转弹窗：问题与解决方案

2025-01-04 16:04:26

iOS Chrome 自定义 URL 跳转弹窗问题

问题的出现

在 iOS 设备上使用 Chrome 浏览器，当尝试通过 <a> 标签或其他 JavaScript 代码跳转到自定义 URL Scheme (如 myapp://xxx) 时，可能会出现一个“允许/不允许”的弹窗提示。这种行为与 Android 系统存在差异，后者通常不会显示此弹窗。此问题影响了用户体验，导致跳转流程被中断，需要寻找解决办法。

问题原因

此弹窗的出现是 Google Chrome 在 iOS 平台上的一个安全机制，目的是在重定向到非标准 URL Scheme 时向用户发出提示，确认用户知晓即将跳转的操作，以防恶意应用滥用自定义 URL 进行钓鱼攻击或非法跳转。不同于 Android，iOS 在应用程序间的跳转有着更严格的安全策略，这可以解释为什么在不同平台表现有所区别。这个安全措施在 Chrome 某个版本开始引入，而非早期就存在的。

解决方案

尽管 Chrome 安全弹窗不能通过直接的 JavaScript 配置禁用，但可通过以下几种方法尽可能减轻它带来的影响。

方案一：使用 `location.href` 的延迟跳转

这种方法利用 JavaScript 的异步机制，延迟跳转，可能减少弹窗出现的几率。具体来说，就是使用 setTimeout 函数将 location.href 的赋值操作延迟到一段稍后的时间执行。这个延迟时间可以进行试验调整。

代码示例:

function redirectToCustomURL(url) {
  setTimeout(() => {
    window.location.href = url;
  }, 100); // 延迟 100 毫秒
}

// 调用函数
redirectToCustomURL('myapp://someData');

操作步骤：

在触发跳转的 HTML 或 JavaScript 代码中加入此方法。
调整 setTimeout 的延迟时间，寻找最佳的用户体验。过短的延迟可能不会有效果；过长的延迟可能会造成用户感知明显的等待时间。

原理：

通过 setTimeout 设置，跳转并非即刻发生，一定程度规避浏览器直接检测到的即时跳转行为。这个方法的有效性并不稳定，会随着 Chrome 的更新发生改变。它并不提供彻底解决弹窗问题的方法，仅是一种缓解手段。

方案二：使用 Universal Links

Universal Links (通用链接) 是 iOS 和 Android 提供的一个标准方案，用于链接应用程序的内容。使用 Universal Links 可以绕过 Chrome 中的 “允许/不允许” 弹窗，因为它直接将用户引导至对应的应用程序，被系统认为是一种安全的跳转行为。 Universal Links 使用标准的 HTTP(S) URL，系统可以验证域名所属的应用，并且进行正确的重定向。

操作步骤：

服务器端配置: 需要在你的网站服务器的根目录部署一个名为 apple-app-site-association 的 JSON 文件，内容类似：

{
     "applinks": {
         "apps": [],
         "details": [
            {
                "appID": "YOUR_TEAM_ID.YOUR_BUNDLE_ID",
                "paths": ["/app-path/*"] // 此处的路径需与你的跳转链接相符
            }
        ]
   }
}

YOUR_TEAM_ID：你的苹果开发者团队ID。
YOUR_BUNDLE_ID: 你的应用程序 Bundle Identifier.
/app-path/* 匹配你想要打开应用程序的网址。

客户端配置: 需要在 iOS 应用的 Associated Domains 配置中添加你的网站域名。在 Xcode 中，选择项目 Target，切换到 Signing & Capabilities 选项卡，添加 "Associated Domains" 配置并加入 applinks:yourdomain.com.
在跳转时， 使用配置在Universal Link中匹配的 https 链接。
例如：https://yourdomain.com/app-path/your-data.

原理：

系统使用你的网站提供的 apple-app-site-association 文件进行域名校验。如果验证通过，则会在访问你的网站链接时直接打开相应的应用程序，避免了弹窗提示，从而带来更加顺滑的跳转体验。

注意： Universal Links 配置比较复杂，需要保证网站，App 和 Xcode 中配置完全一致才能正常使用。并且，苹果系统缓存该文件有一定延迟。

方案三：使用 iframe + Custom URL Scheme

此方案尝试通过在一个 <iframe> 中打开自定义 URL Scheme 的方式来避免弹窗。具体来说，首先创建并加入一个 iframe 元素到当前文档中，然后在 iframe 中进行自定义URL scheme跳转。

代码示例：

function redirectToCustomURLByIframe(url){
    var iframe = document.createElement('iframe');
    iframe.style.display = 'none'; // iframe 可隐藏
    iframe.src = url;
    document.body.appendChild(iframe);

    setTimeout(() => {
       document.body.removeChild(iframe); // 清理生成的iframe元素
    },500) ;// 500ms 的延时,保证跳转成功

}

redirectToCustomURLByIframe('myapp://someData');