如何引导网站用户点击按钮经浏览器弹窗同意后唤起本地已安装的自定义thin client exe

你参考的GitHub调起本地客户端的效果，本质是依赖*自定义URI协议（URL Scheme）*实现：本地客户端安装时会在系统注册专属的协议头，浏览器识别到该协议的跳转请求后，就会弹出询问弹窗，用户同意后即可启动对应本地程序。

实现步骤 #

步骤1：为thin client注册自定义URI协议 #

需要在客户端安装逻辑中新增系统协议注册配置，各系统实现方式如下：

• Windows：写入注册表，新增HKEY_CLASSES_ROOT\thinclient项，配置协议指向你的客户端启动路径
• macOS：在客户端的Info.plist中添加CFBundleURLTypes配置，声明thinclient协议
• Linux：在.desktop启动文件中添加MimeType=x-scheme-handler/thinclient;配置

这里的thinclient是可自定义的专属协议头，可替换为你的产品名称，注意不要和公共协议、其他常用软件的协议头重复。

步骤2：前端页面交互实现 #

核心逻辑：

1. 用户点击按钮后，先弹出确认框征得用户同意
2. 同意后触发自定义协议跳转，浏览器自动弹出启动客户端的询问弹窗
3. 新增异常兜底：如果用户未安装客户端，超时后提示用户下载安装

代码示例：

// 绑定按钮点击事件
document.querySelector('#openThinClientBtn').addEventListener('click', () => {
  // 第一步：征得用户同意
  const userAgreed = confirm('是否打开本地瘦客户端？');
  if (!userAgreed) return;

  // 第二步：触发自定义协议跳转，可拼接业务参数
  const customUri = 'thinclient://open?action=login&userId=xxx';
  // 用隐藏iframe加载，避免当前页面被跳转
  const iframe = document.createElement('iframe');
  iframe.style.display = 'none';
  iframe.src = customUri;
  document.body.appendChild(iframe);

  // 兜底逻辑：2秒未启动成功判定为未安装客户端
  setTimeout(() => {
    document.body.removeChild(iframe);
    alert('检测到您未安装瘦客户端，请先下载安装后重试');
    // 此处可展示下载指引
  }, 2000);
})

注意事项 #

• 传递参数时注意做URL编码，避免特殊字符导致客户端解析失败
• 协议跳转逻辑必须绑定在用户主动触发的点击事件回调中，部分浏览器会拦截非用户主动触发的协议跳转
• 超时兜底的时长可根据不同浏览器的弹窗停留规则自行调整

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