如何使用JavaScript检测iOS/Android手机上是否安装指定应用？

首先明确：出于浏览器安全限制，JavaScript无法直接检测设备上是否安装了某个APP，但可以通过「URL Scheme唤起尝试」的间接方式来判断，具体方案如下：

1. 核心思路：利用URL Scheme唤起检测 #

每个银行APP都有专属的URL Scheme（比如工行是icbc://，招行是cmb://），我们可以尝试唤起这个Scheme，若在指定时间内没有成功唤起，就判断为未安装。

实现代码示例 #

// 定义银行列表及对应的Scheme
const bankList = [
  { name: "工商银行", scheme: "icbc://" },
  { name: "招商银行", scheme: "cmb://" },
  { name: "建设银行", scheme: "ccb://" },
  // 补充其他银行的Scheme...
];

// 检测单个APP是否可唤起
async function checkAppInstalled(scheme) {
  return new Promise((resolve) => {
    // 创建隐藏iframe尝试唤起Scheme
    const iframe = document.createElement('iframe');
    iframe.style.display = 'none';
    iframe.src = scheme;
    document.body.appendChild(iframe);

    // 超时判断：1秒内未唤起则判定为未安装
    const timeout = setTimeout(() => {
      document.body.removeChild(iframe);
      resolve(false);
    }, 1000);

    // 页面失去焦点则说明唤起成功，判定为已安装
    window.addEventListener('blur', () => {
      clearTimeout(timeout);
      document.body.removeChild(iframe);
      resolve(true);
    }, { once: true });
  });
}

// 批量检测并重新排序列表
async function sortBankList() {
  // 为每个银行添加安装状态标记
  const bankWithStatus = await Promise.all(
    bankList.map(async bank => ({
      ...bank,
      installed: await checkAppInstalled(bank.scheme)
    }))
  );

  // 按「已安装优先」排序
  const sortedList = bankWithStatus.sort((a, b) => {
    return b.installed - a.installed;
  });

  // 渲染排序后的列表（示例）
  const listContainer = document.getElementById('bank-list');
  sortedList.forEach(bank => {
    const li = document.createElement('li');
    li.textContent = `${bank.name} ${bank.installed ? '(已安装)' : ''}`;
    listContainer.appendChild(li);
  });
}

// 页面加载完成后执行检测排序
window.addEventListener('DOMContentLoaded', sortBankList);

2. 关键注意事项 #

• Scheme准确性：必须提前收集对应银行APP的官方URL Scheme，部分银行可能有多个Scheme，需测试确认有效。
• 浏览器兼容性：该方法在移动端不同浏览器（如微信内置浏览器、Safari、Chrome）表现有差异，部分浏览器会拦截Scheme唤起请求，导致检测结果不准确。
• 用户体验：唤起APP时可能弹出系统授权提示，需提前向用户说明检测逻辑，避免造成困惑。
• iOS特殊限制：iOS 14+对Scheme唤起有更严格的管控，可配合Universal Links提升检测可靠性，但仍无法做到100%准确。

3. 替代稳定方案 #

如果Scheme检测的可靠性达不到需求，可以提供「手动标记已安装银行」的功能，让用户主动选择，再基于用户的选择排序列表，这种方式完全可控，稳定性更高。

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