设置
这个问题被问了很多，但是我找不到一个解决我的问题的方法…
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脚本，我希望它填充串行输入字段，然后按下按钮。示例:我打开URL "http://127.0.0.1:5500/index.html?serial=12345678">
Tampermonkey脚本从URL(12345678)获取序列，将其插入serialInput字段，并必须按Check按钮，但未按下该按钮。click()不起作用。如果我们检查控制台日志，我们可以看到，当我们在串行输入字段中按ENTER键时，check_btn.click()工作，但是当我们从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!
}
});
}
})();
似乎问题出在没有生成所有的元素。所以我添加了这个函数:
function Submit() {
document.querySelector("#searchSerialButton").click()
}
并更改document.querySelector("#searchSerialButton").click()与
const check_btn = document.getElementById("searchSerialButton");
setTimeout(function() {check_btn.click()}, 0);
由于问题似乎是您的脚本运行得太早，因此有许多方法可以解决此问题。正如OP已经在他们的回答中指出的那样，添加延迟是一种解决方案。
设置@run-at
尝试更改@run-at的meta属性。
// @run-at document-idle
当你的userscript运行时，它会改变。
The script will run after the page and all resources (images, style sheets, etc.) are loaded and page scripts have run.
Tampermonkey文档<标题>window h1> 者，如果你喜欢Javascript解决方案，你可以在load窗口事件的回调中运行脚本。查看MDN文档获取更多信息。
window.onload = (event) => {
// Run your script here
};