如何将HTML GUI与AutoHotkey脚本关联，实现点击链接触发功能？

问题背景 #

正在制作测试项目，使用HTML作为AutoHotkey的GUI界面，需要实现列表中href="#"的链接被点击时，触发对应的AutoHotkey脚本逻辑（如发送输入内容、执行特定操作等），现有HTML页面和AutoHotkey加载代码如下：

现有HTML代码 #

<body>
  <h1 class="logo">
    AUTO
  </h1>
  <h5 class="promo-text">
    Thank you for using Auto :) follow us on discord! {link}
  </h5>

  <div id="options">
      <table style="float: left">
        <tr>
          <hr style="width: 399px;">
          
          <td>[1] <a href="1_NUKE.html">Sign In Account</a>
               <br>
               [2] <a href="#"> Unfriend all friends</a>
            <br>
          [3] <a href="#"> Delete and leave all servers </a>
            <br>
        [4] <a href="#">New servers</a>
            <br>
        [5]  <a href="#">Scan for items</a>
            <br>
        [6] <a href="#">Typer</a>
            <br>
        [7] <a href="#"> Auto-image</a>
            <br>
        [8]  <a href="#">Google Search</a>
            <br>
        [9] <a href="#">Set-Date </a>
                 </td>
        </tr>
      </table>
      <table style="float: left">
        <tr>
        <br>
          <td>[10]  <a href="#">Filler</a>
            <br>
              [11] <a href="#">Profile Changer</a>
            <br>
        [12] <a href="#">[Beta testing for features] </a>
            <br>
        [13] <a href="#"> Filler</a>
            <br>
        [14] <a href="#">  Videos</a>
            <br>
        [15] <a href="#">Contact Report</a>
            <br>
        [16] <a href="#">Chat Scannerr</a> 
            <br>
        [17] <a href="#"> Information</a>
            <br>
        [18]<a href="#">Settings</a>
      
      
      </td>
        </tr>
      </table>
      
    </div>
  </body>

  <style>
    body { 
        background-color: #f3f6f4;
        text-decoration: none; 
        align-items: center;
        margin: 0 auto; 
        
display:flex; flex-direction:column; justify-content:center;
min-height:100vh;
    }

    #options td {  
        color:RED;
    }

    a { 
      text-decoration: none; 
      color: gray; 
      font-family:initial;
    }

    .promo-text { 
      color:aliceblue;
      font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
      font-weight: lighter; 
    }
    
    .logo { 
        font-family: Arial; 
        font-size: 100px; 
        color: red; 
    }

    a:hover { 
      color: red; 
    }
  </style>
</html>

现有AutoHotkey代码 #

Gui, -DPIScale
Gui, Margin, 1, 1
Gui, Add, ActiveX, vText w1101 h632, htmlfile
Text.write(html)
Gui, Show
Return

GuiClose:
   ExitApp

实现方法 #

步骤1：修改HTML链接，添加动作标识 #

给每个需要触发AHK动作的<a>标签添加自定义属性data-action，标记对应的动作名称，保留href="#"避免页面跳转。示例修改：

[2] <a href="#" data-action="unfriendAll"> Unfriend all friends</a>
[3] <a href="#" data-action="leaveServers"> Delete and leave all servers </a>
[4] <a href="#" data-action="newServers">New servers</a>
[5] <a href="#" data-action="scanItems">Scan for items</a>
[6] <a href="#" data-action="typer">Typer</a>
<!-- 其他链接同理添加对应data-action值 -->

步骤2：添加JavaScript事件监听 #

在HTML的<body>末尾插入<script>块，拦截链接点击事件，判断是否为目标链接后调用AHK回调：

<script>
document.querySelectorAll('a[data-action]').forEach(link => {
    link.addEventListener('click', function(e) {
        e.preventDefault(); // 阻止默认跳转
        const action = this.dataset.action;
        // 调用AHK暴露的回调函数
        if (window.external && typeof window.external.CallAHK === 'function') {
            window.external.CallAHK(action);
        }
    });
});
</script>

步骤3：修改AutoHotkey代码，注册回调并处理动作 #

在AHK代码中给ActiveX控件绑定回调函数，根据动作名称执行对应脚本逻辑：

Gui, -DPIScale
Gui, Margin, 1, 1
Gui, Add, ActiveX, vText w1101 h632, htmlfile
Text.write(html)
// 给HTML的window.external绑定回调函数
Text.document.parentWindow.external := {CallAHK: Func("OnHtmlAction")}
Gui, Show
Return

// 处理HTML传来的动作请求
OnHtmlAction(action) {
    Switch action {
        Case "unfriendAll":
            ; 替换为实际删除好友的脚本逻辑，示例发送提示文本
            SendInput, 正在执行删除所有好友操作...`n
        Case "leaveServers":
            SendInput, 正在执行退出并删除所有服务器操作...`n
        Case "newServers":
            SendInput, 正在执行新建服务器操作...`n
        Case "scanItems":
            SendInput, 正在执行扫描物品操作...`n
        Case "typer":
            SendInput, 这是自动输入测试文本...`n
        // 其他动作对应的逻辑依次添加
        Default:
            MsgBox, 未定义的动作：%action%
    }
}

GuiClose:
   ExitApp

说明 #

• data-action属性用于清晰区分每个链接对应的动作，便于后续维护。
• JavaScript通过拦截点击事件，实现HTML与AutoHotkey的通信。
• OnHtmlAction函数通过分支处理不同动作，可根据需求替换为实际的业务逻辑（如窗口控制、文件操作等）。

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