如何实现通过浏览器唤起本地指定程序的功能

这个功能是操作系统和浏览器原生支持的标准能力，核心依赖自定义URI协议（Custom URI Scheme），不需要对浏览器做任何定制配置，也不需要调用非标准API，Zoom等应用的唤起逻辑都是基于这个原理实现的。

完整实现流程 #

1. 本地客户端注册专属协议 #

你需要唤起的桌面程序，在安装阶段就要向操作系统注册自定义的协议头（比如Zoom注册的是zoommtg://、zoomus://），操作系统会维护协议头和对应程序启动路径的映射关系：

• Windows端：写入注册表的HKEY_CLASSES_ROOT节点，配置协议对应的启动命令
• macOS端：在程序包的Info.plist文件中声明CFBundleURLTypes字段绑定协议
• Linux端：在.desktop桌面配置文件中添加MimeType字段关联协议

2. 前端页面触发协议调用 #

用户完成登录重定向到目标页面后，用前端代码触发自定义协议地址的访问即可唤起程序，两种常用实现方式：

• 直接跳转协议地址：

// 地址中可以携带参数传递给本地程序，比如用户ID、业务标识等
window.location.href = "yourcustomscheme://action=join&roomid=123456&user=xxx"

• 动态生成a标签触发点击：

const link = document.createElement('a')
link.style.display = 'none'
link.href = "yourcustomscheme://action=join&roomid=123456&user=xxx"
document.body.appendChild(link)
link.click()
document.body.removeChild(link)

浏览器识别到访问的是HTTP/HTTPS等内置协议之外的地址时，会自动查询操作系统的协议映射表，匹配到对应程序后就会弹出用户确认提示，确认后即可启动程序，同时会把协议地址中的参数传递给程序做后续业务处理。

常见优化&注意事项 #

• 加兜底判断处理未安装客户端的场景：

const invokeTimeout = setTimeout(() => {
  alert("未检测到对应客户端，请先下载安装")
}, 1500)

window.location.href = "yourcustomscheme://xxx"
// 页面失焦说明唤起成功，清除超时提示
window.addEventListener("blur", () => clearTimeout(invokeTimeout))

安全提示：目前所有主流浏览器都会对自动触发的自定义协议调用弹出用户确认提示，不支持静默唤起，这是浏览器默认的安全策略，无法绕过，避免恶意网站随意调用本地程序带来安全风险，属于正常的交互逻辑，不需要修改浏览器配置。

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