Safari检测App Scheme有效性时弹出错误提示的解决办法咨询

我完全理解你现在的困扰——Android上用XMLHttpRequest检测App Scheme的方式流畅又不打扰用户，但到了Safari这边，不管是直接修改window.location还是用XHR请求，都会弹出那个烦人的「Safari无法打开页面，因为地址无效」提示，彻底打断了原本的UI流程。

首先得说清楚为什么你的XHR方法在Safari里行不通：Safari根本不允许用XMLHttpRequest去请求自定义的App Scheme，这种请求从一开始就会被判定为无效，自然会触发错误提示，完全达不到你想要的“后台检测”效果。

那有没有更稳妥的方式，既能检测Scheme是否存在，又不会在Safari里弹出错误呢？目前前端社区里最常用的是iframe+定时器+页面可见性监听的组合方案，给你具体讲讲：

核心思路 #

• 用一个隐藏的iframe尝试加载App Scheme链接，Safari里这种方式即使Scheme不存在，也不会弹出用户可见的错误提示
• 设置一个定时器，超时后（比如1秒）自动跳转到应用商店，作为兜底逻辑
• 监听页面的可见性变化：如果App成功唤起，当前页面会进入后台（变成隐藏状态），这时就取消定时器，避免不必要的商店跳转

代码示例 #

function openAppOrRedirectToStore() {
  const appSchemeUrl = "myapp://path/to/resource";
  const appStoreUrl = "https://apps.apple.com/cn/app/your-app-name/idxxxxxx"; // 替换为你的应用商店链接

  // 创建隐藏的iframe用于尝试唤起App
  const iframe = document.createElement('iframe');
  iframe.style.display = 'none';
  iframe.src = appSchemeUrl;
  document.body.appendChild(iframe);

  // 设置定时器，超时则跳转应用商店
  const timeoutTimer = setTimeout(() => {
    window.location.href = appStoreUrl;
    document.body.removeChild(iframe);
  }, 1000);

  // 监听页面可见性变化：若页面被隐藏，说明App已唤起，取消定时器
  document.addEventListener('visibilitychange', () => {
    if (document.hidden) {
      clearTimeout(timeoutTimer);
      document.body.removeChild(iframe);
    }
  });

  // 兼容旧版iOS的pageshow事件，避免返回页面后触发错误跳转
  window.addEventListener('pageshow', () => {
    clearTimeout(timeoutTimer);
    document.body.removeChild(iframe);
  });
}

// 调用唤起逻辑
openAppOrRedirectToStore();

注意事项 #

• 定时器的时长建议设置在800-1500毫秒之间，太短可能系统还没完成App唤起就触发了商店跳转，太长会让用户等待感明显
• 这种方案也不是100%无瑕疵，比如部分用户可能禁用了App唤起权限，但这是目前能兼顾体验和功能的最优解之一
• 绝对不要用XHR、Fetch这类方式去请求自定义Scheme，Safari对这类请求的限制非常严格，必然会弹出错误

备注：内容来源于stack exchange，提问作者rolinger