iOS谷歌Chrome应用内自定义URI scheme跳转失效问题及方案咨询

• iOS平台的第三方浏览器（包括Chrome）受苹果系统规则限制，所有Web内核强制基于Safari WebKit实现，对自定义URL Scheme的跳转有严格的安全校验机制
• 原代码存在两个核心缺陷，直接触发iOS Chrome的拦截逻辑：
  • 跳转逻辑未绑定用户主动触发的点击事件，页面加载后自动执行location.href的自定义scheme跳转，会被判定为无用户交互的违规跳转，直接触发新开标签页的强制关闭逻辑
  • 代码中创建a标签后调用的aTag.Click()存在语法错误，原生DOM的click方法为小写click()，本身就无法触发跳转，后续的App Store跳转逻辑也因为标签被提前关闭完全无法执行
• iOS Chrome内置了短时间无交互的非Web协议跳转拦截规则：只要检测到页面没有绑定实时用户手势，就尝试跳转到自定义scheme，会立刻销毁当前标签页，不会给后续延时逻辑留出执行空间

核心调整思路为所有跳转逻辑必须纳入用户真实点击事件的执行链路，通过页面可见性状态判断是否成功唤起App，替代固定延时的粗暴兜底逻辑，同时兼容Safari、iOS Chrome等全量Web环境。

优化后的可运行代码如下：

function launchApp(){
  const URI_SCHEME = 'myapp://';
  const APP_STORE_URL = 'https://itunes.apple.com/jp/app/myapp/id111111111';
  // 校验iOS设备运行环境
  const userAgent = navigator.userAgent.toLowerCase();
  const isIOSDevice = /iphone|ipad|ipod/.test(userAgent);
  if(!isIOSDevice) return;

  // 将跳转逻辑绑定到用户点击事件的同步回调中
  const handleAppLaunch = () => {
    let isAppLaunched = false;
    let jumpTimer = null;

    // 监听页面可见性变化：当唤起App时，当前页面会切换到后台触发visibilitychange事件
    const handleVisibilityChange = () => {
      if(document.visibilityState === 'hidden'){
        isAppLaunched = true;
        // 成功唤起App时，清除待执行的App Store跳转定时器
        clearTimeout(jumpTimer);
      }
    }
    document.addEventListener('visibilitychange', handleVisibilityChange);

    // 触发自定义Scheme跳转
    location.href = URI_SCHEME;

    // 兜底延时判断：如果1.5s后页面仍处于可见状态，说明App未安装，跳转App Store下载页
    jumpTimer = setTimeout(() => {
      if(!isAppLaunched){
        location.href = APP_STORE_URL;
      }
      // 清理事件监听，避免内存泄漏
      document.removeEventListener('visibilitychange', handleVisibilityChange);
    }, 1500);
  }

  // 为页面上的跳转按钮绑定真实点击监听，禁止页面加载完成后自动执行跳转
  document.querySelector('#app-jump-button').addEventListener('click', handleAppLaunch);
}

方案的核心兼容优化点：

• 完全符合iOS Chrome的安全规则：所有跳转动作都在用户点击的执行链路内完成，不存在无交互的自动跳转，不会触发标签页强制关闭的拦截逻辑
• 用页面可见性判断替代固定延时的盲跳逻辑：相比原代码固定等待1200ms就跳转App Store的方式，通过监听页面是否切换到后台，可以精准判断App是否成功唤起，减少不必要的跳转损耗
• 移除了兼容性较差的动态创建a标签触发点击的逻辑，直接通过location.href做协议跳转，避免浏览器对程序化触发的a标签点击的拦截
• 增加了定时器和事件监听的清理逻辑，避免跳转流程中的内存泄漏问题

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