Tampermonkey脚本调用click()无效，如何触发网页按钮点击？

问题场景 #

我编写了一个Tampermonkey脚本，目标是打开带serial参数的URL（如http://127.0.0.1:5500/index.html?serial=12345678）时，自动提取序列号填充到输入框，再触发Check按钮的点击操作。但遇到了奇怪的问题：脚本里直接调用check_btn.click()毫无效果，而在输入框按下回车键时调用同一个方法却能正常触发按钮的点击逻辑。

页面相关代码 #

script.js

$(document).ready(function ()
{
    if (document.getElementById('searchSerialButton') !== null)
    {
        document.getElementById("searchSerialButton").addEventListener('click', () =>
        {
            console.log("scripts.js -> ready() callback -> addEventListener(`click`) callback");
        });
    }
});

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>check guarantee card </title>
    <link rel="stylesheet" href="style.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>
    <script src="/scripts.js"></script>
</head>
<body>
    <div>
        <h1>Enter product serial number into search field</h1>
        <input id="serialInput"/>
        <button id="searchSerialButton">Check</button>
    </div>
</body>
</html>

Tampermonkey脚本代码 #

// ==UserScript==  
// @name         Test press button  
// @namespace    http://tampermonkey.net/  
// @version      0.1  
// @description  try to take over the world!  
// @author       You  
// @match        http://127.0.0.1:5500/index.html?serial=*  
// @icon         https://www.google.com/s2/favicons?sz=64&domain=0.1  
// @grant        none  
// ==/UserScript==  

(function ()
{
    'use strict';
    // DOMContentLoaded fires before TamperMonkey starts running on the page
    // fix error "Uncaught TypeError: element is null"
    if (document.readyState == "complete" || document.readyState == "loaded" || document.readyState == "interactive")
    {
        const params = new URLSearchParams(window.location.search);
        const inputField = document.getElementById("serialInput");
        inputField.value = params.get("serial");
        console.log(`serial = document.getElementById("serial") = `, inputField);
        const check_btn = document.getElementById("searchSerialButton");
        console.log(`check_btn = document.getElementById("searchSerialButton") = `, check_btn);
        check_btn.click(); // DOES NOT WORK!

        // Execute a function when the user presses a key on the keyboard
        inputField.addEventListener("keydown", function (event)
        {
            // If the user presses the "Enter" key on the keyboard
            if (event.code === "NumpadEnter" || event.code === "Enter")
            {
                // Cancel the default action, if needed
                event.preventDefault();
                // Trigger the button element with a click
                check_btn.click(); // WORKS!
            }
        });
    }
})();

问题原因 #

核心问题是脚本执行时机早于页面的点击事件绑定完成。页面的script.js通过$(document).ready()来绑定按钮的点击事件，而你的Tampermonkey脚本虽然判断了document.readyState，但此时jQuery的ready回调可能还没执行——按钮上还没绑定任何点击逻辑，所以直接调用click()自然没有效果。

而回车键触发时，页面已经完全加载完成，jQuery的ready回调早就执行完毕，按钮的点击事件已经绑定，所以此时调用click()就能正常触发逻辑。

解决方案 #

以下是几种可行的解决方式：

方式1：延迟执行点击操作 #

给脚本里的check_btn.click()加一个短暂延迟，确保页面的事件绑定完成：

// 替换原脚本中的check_btn.click()
setTimeout(() => {
    check_btn.click();
}, 100); // 可根据实际情况调整延迟时长，比如200ms

方式2：等待jQuery的ready事件 #

因为页面依赖jQuery，直接在脚本里监听jQuery的ready事件，确保页面逻辑完全初始化后再执行操作：

(function () {
    'use strict';

    function init() {
        const params = new URLSearchParams(window.location.search);
        const inputField = document.getElementById("serialInput");
        inputField.value = params.get("serial");
        const check_btn = document.getElementById("searchSerialButton");
        check_btn.click();

        // 保留回车键触发逻辑
        inputField.addEventListener("keydown", function (event) {
            if (event.code === "NumpadEnter" || event.code === "Enter") {
                event.preventDefault();
                check_btn.click();
            }
        });
    }

    // 优先等待jQuery ready，否则监听DOMContentLoaded
    if (typeof jQuery !== 'undefined') {
        $(document).ready(init);
    } else {
        document.addEventListener('DOMContentLoaded', init);
    }
})();

方式3：模拟原生点击事件 #

如果前两种方式无效，可以尝试创建并分发原生鼠标点击事件，模拟真实用户的点击操作：

// 替换原脚本中的check_btn.click()
const clickEvent = new MouseEvent('click', {
    bubbles: true,
    cancelable: true,
    view: window
});
check_btn.dispatchEvent(clickEvent);

验证方法 #

修改脚本后打开带serial参数的URL，查看浏览器控制台是否输出scripts.js -> ready() callback -> addEventListener(click) callback，如果输出则说明点击触发成功。

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