通过网页调用本地应用程序

三葉Leaves Author
  2025-08-13 2025-08-13 创建   2025-08-15 11:23:57 2025-08-15 11:23:57 更新      1.4k 字  5 分钟  

如果你在某个网站点击某个按钮后，它提示打开本地的某个应用，其实无外乎这三种情况：

自定义 URL Scheme（Protocol Handler）🌟

原理

如果你看到网页点按钮能直接启动本地软件，99% 情况是它调用了一个自定义 URL 协议（比如 wechat://、alipay://、mycompanyapp://）。

所需的关键数据只有：

  1. 协议名（scheme）：例如 myapp://

  2. 调用参数（路径和 query 参数），例如 myapp://open?file=test.doc

  3. 用户必须已安装并注册该协议的应用

  4. 软件安装时在系统注册的处理方式（Windows 注册表 / macOS plist / Linux desktop entry）

使用方法

如果已经确知应用的协议信息，样板代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
<!DOCTYPE html>
<html>
<head>
    <title>启动本地应用</title>
</head>
<body>
    <button onclick="openApp()">打开我的应用</button>
    <button onclick="openAppWithParams()">打开应用并传递参数</button>

    <script>
        function openApp() {
            // 基本调用
            window.location.href = 'myapp://';
        }

        function openAppWithParams() {
            // 传递参数
            window.location.href = 'myapp://open?file=document.txt&action=edit';
        }

        // 更优雅的方式，处理可能的错误
        function launchApp(url) {
            const link = document.createElement('a');
            link.href = url;
            link.click();
            
            // 可选：检测是否成功启动
            setTimeout(() => {
                if (document.hidden) {
                    console.log('应用可能已启动');
                } else {
                    console.log('应用启动失败或未安装');
                }
            }, 1000);
        }
    </script>
</body>
</html>

关键在于 window.location.href 的值。

那么我们作为一名前端开发者，如何获知某个应用的协议名或者调用参数？

这主要看你用的系统。

Windows

Windows 里自定义协议一般是写在注册表里的，你可以这样找：

1. 用注册表查找

  1. 按 Win + R → 输入 regedit → 回车。

  2. 展开路径：

    1
    HKEY_CLASSES_ROOT

  3. 在这个目录下，除了常见的 .txt、.jpg 之类的扩展名，还有一些纯文本的名字（比如 zoommtg、alipay、myapp）。

  4. 找到你怀疑是这个软件的名字的项（例如 steam、alipay）。

  5. 打开它，看看里面有没有：

    1
    URL Protocol

    这个值存在就说明这是一个 URL 协议。

  6. 继续展开到：

    1
    HKEY_CLASSES_ROOT\<协议名>\shell\open\command

    里面的 (默认) 值会告诉你启动程序的完整路径和参数格式，例如：

    1
    "C:\Program Files\MyApp\myapp.exe" "%1"

    %1 就是浏览器传入的 URL，比如 myapp://open?file=test.txt。

2. 用命令行查找

在 PowerShell 里：

1
2
3
Get-ChildItem "Registry::HKEY_CLASSES_ROOT" |
Where-Object { ($_).GetValue("URL Protocol") -ne $null } |
Select-Object PSChildName

这会列出所有注册了 URL 协议的名字，你就能快速找到可能的协议名。

macOS

  1. 打开终端，输入：

    1
    /System/Library/Frameworks/CoreServices.framework/Frameworks/LaunchServices.framework/Support/lsregister -dump

  2. 输出很长，你可以 grep：

    1
    lsregister -dump | grep -A 3 'CFBundleURLSchemes'

    就会看到所有协议，比如：

    1
    2
    3
    CFBundleURLSchemes = (
        zoommtg
    )

  3. 找到协议名后，可以在 /Applications 下找到对应应用，查看 Info.plist 文件（里面有 URL 处理规则）。

Linux

  1. 看本地 .desktop 文件（一般在 /usr/share/applications 或 ~/.local/share/applications）。

  2. 用 grep 查找 URL 协议：

    1
    grep -R "x-scheme-handler" /usr/share/applications ~/.local/share/applications

  3. 会输出类似：

    1
    x-scheme-handler/zoommtg=Zoom.desktop

  4. 打开对应 .desktop 文件，就能看到启动命令和参数。

调用参数的推断

  • 如果注册表（或 plist / desktop 文件）里的命令是：

    1
    "C:\Program Files\MyApp\myapp.exe" "%1"

    那 %1 就是完整的 URL（如 myapp://something?x=1）。

  • 有些程序会写死格式，比如：

    1
    "C:\Program Files\Player\player.exe" --play "%1"

    那就说明协议调用时会多一个 --play 参数。

  • 不清楚参数格式时，可以先手动在浏览器地址栏输入：

    1
    协议名://

    看它的反应，有的会直接弹软件，有的会报错提示缺少参数。

其他通过网页打开应用的可能

文件类型关联（File Association）

原理

  • 如果网页提供一个特定扩展名的文件（如 .docx、.torrent、.psd），且用户系统已把这种文件关联到某个本地程序，那么下载后直接“打开”就会调用该程序。

  • 这通常需要用户点击下载，并允许浏览器打开文件。

所需条件 / 数据

  • 文件扩展名（例如 .pdf、.torrent）

  • 该扩展名在系统中已经关联到本地应用

  • 文件内容本身（可能是空壳文件，只要扩展名正确）

浏览器扩展 / 原生消息通信（Native Messaging）

原理

  • 安装浏览器扩展（Extension / Add-on），扩展中声明可以与本地软件通信。

  • 当网页调用扩展的接口时，扩展可以触发本地应用运行。

所需条件 / 数据

  • 浏览器扩展的 ID / API

  • 本地安装的“宿主程序”

  • 两者之间的通信协议（JSON、命令行参数等）

特殊场景

  • PWA + 协议处理：现代浏览器（Chrome/Edge/Firefox）支持 PWA 注册协议（navigator.registerProtocolHandler），但受安全限制多，不能直接调用本地 EXE。

  • 企业环境 / 内网应用：可能直接用 ActiveX、IE COM 调用本地程序（现在几乎废弃）。

  • 本地 WebSocket / HTTP 服务：本地应用在 127.0.0.1 开个端口，网页直接发请求给它（但浏览器会有限制，需要 CORS 放行）。

应用开发者的角度

那么作为应用开发者，又该怎么做才能保证自己的应用能被网页调用打开？

我们在 windows 桌面新建一个 .reg 文件，内容如下，把路径替换为真实的应用路径即可：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
Windows Registry Editor Version 5.00

[HKEY_CLASSES_ROOT\myapp]
@="MyApp Protocol"
"URL Protocol"=""

[HKEY_CLASSES_ROOT\myapp\DefaultIcon]
@="C:\\Path\\To\\Your\\App.exe,1"

[HKEY_CLASSES_ROOT\myapp\shell]

[HKEY_CLASSES_ROOT\myapp\shell\open]

[HKEY_CLASSES_ROOT\myapp\shell\open\command]
@="\"C:\\Path\\To\\Your\\App.exe\" \"%1\""
  • 标题: 通过网页调用本地应用程序
  • 作者: 三葉Leaves
  • 创建于 : 2025-08-13 00:00:00
  • 更新于 : 2025-08-15 11:23:57
  • 链接: https://blog.oksanye.com/dcf3f84ac806/
  • 版权声明: 本文章采用 CC BY-NC-SA 4.0 进行许可。
评论
目录
通过网页调用本地应用程序
  1. 自定义 URL Scheme（Protocol Handler）🌟
    1. 原理
    2. 使用方法
      1. Windows
      2. macOS
      3. Linux
      4. 调用参数的推断
  2. 其他通过网页打开应用的可能
    1. 文件类型关联（File Association）
      1. 原理
      2. 所需条件 / 数据
    2. 浏览器扩展 / 原生消息通信（Native Messaging）
      1. 原理
      2. 所需条件 / 数据
    3. 特殊场景
  3. 应用开发者的角度