如何用JavaScript/JQuery从浏览器检测电脑已安装应用？

嘿，这个需求确实有点棘手——毕竟浏览器出于安全考量，会严格限制网页直接访问系统层面的信息，但别担心，还是有几个可行的办法能帮你实现检测Windows上是否安装了Excel、Teams这类应用，并且在已安装时弹出提示：

方案1：利用应用的自定义URL协议（最易实现） #

大部分桌面应用（包括Excel、Teams）都会在Windows系统中注册专属的URL协议，我们可以通过尝试唤起这个协议来间接判断应用是否安装。原理是：如果应用已安装，唤起协议会打开应用，同时浏览器页面会失去焦点；如果未安装，浏览器会弹出“无法打开链接”的提示（或者无反应）。

给你写个JavaScript的实现示例：

function checkAppInstalled(appProtocol, appName) {
  let appIsInstalled = false;
  const timeoutMs = 1000; // 可根据实际情况调整超时时间

  // 创建隐藏的iframe来尝试唤起协议（避免直接跳转影响页面）
  const iframe = document.createElement('iframe');
  iframe.style.display = 'none';
  iframe.src = appProtocol;
  document.body.appendChild(iframe);

  // 监听页面失去焦点：如果唤起成功，浏览器会失去焦点，说明应用已安装
  window.addEventListener('blur', handleBlur);

  function handleBlur() {
    appIsInstalled = true;
    alert(`${appName}已安装！`);
    cleanUp();
  }

  // 超时判断：如果超时后仍未失去焦点，说明唤起失败（应用未安装）
  setTimeout(() => {
    if (!appIsInstalled) {
      // 这里可以选择不提示，或者提示用户未安装，根据需求调整
      // alert(`${appName}未安装，请先安装后重试`);
      cleanUp();
    }
  }, timeoutMs);

  // 清理资源
  function cleanUp() {
    window.removeEventListener('blur', handleBlur);
    document.body.removeChild(iframe);
  }
}

// 调用检测Excel
checkAppInstalled('excel:', 'Microsoft Excel');
// 调用检测Teams
checkAppInstalled('msteams:', 'Microsoft Teams');

注意事项：

• 部分浏览器会拦截协议唤起请求，需要用户手动点击允许
• 少数应用可能未注册URL协议，或者协议名称有变动，需要提前确认目标应用的协议
• 超时时间需要根据不同系统的响应速度调整，太长会延迟用户体验，太短可能误判

方案2：使用Web App Manifest的协议处理（仅限Chromium内核浏览器） #

Chrome、Edge等Chromium内核的浏览器支持在PWA（渐进式Web应用）的Manifest文件中声明协议处理权限，之后可以通过API检测系统是否已注册对应协议。

步骤： #

1. 在你的网站根目录创建manifest.json，添加协议声明：

{
  "name": "你的应用名称",
  "short_name": "短名称",
  "start_url": "/",
  "display": "standalone",
  "protocol_handlers": [
    {
      "protocol": "excel:",
      "url": "/handle-protocol?url=%s"
    },
    {
      "protocol": "msteams:",
      "url": "/handle-protocol?url=%s"
    }
  ]
}

2. 在HTML中引入这个Manifest：

<link rel="manifest" href="/manifest.json">

3. 使用JavaScript检测：

async function checkProtocolSupport(protocol, appName) {
  try {
    const isRegistered = await navigator.protocolHandler.isRegistered(protocol);
    if (isRegistered) {
      alert(`${appName}已安装！`);
    }
  } catch (error) {
    console.error(`检测${appName}失败：`, error);
  }
}

checkProtocolSupport('excel:', 'Microsoft Excel');
checkProtocolSupport('msteams:', 'Microsoft Teams');

局限性：

• 仅支持Chrome、Edge等Chromium内核浏览器
• 需要用户将你的网站安装为PWA，并且授权协议处理权限，门槛较高

方案3：借助本地代理程序（最可靠但复杂度高） #

如果上面的方法都无法满足需求，可以考虑开发一个轻量的本地代理服务（比如用Electron、.NET或者Python编写），这个程序运行在用户的Windows电脑上，能够读取系统已安装应用的列表，然后你的网页通过和本地代理通信来获取应用安装状态。

这种方法的优势是检测准确率极高，但缺点是需要用户额外安装代理程序，对用户的门槛比较高，适合企业内部系统这类可控场景。

总结 #

如果是普通公开网站，优先尝试方案1，实现成本最低，大部分场景能满足需求；如果是企业内部的PWA应用，可以考虑方案2；对准确率要求极高且用户群体可控的话，再考虑方案3。

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