使用Greasemonkey实现页面加载后自动点击按钮的问题求助

Hey there! I get the problem—your current script only works on the initial page load because when the page "reloads" the button, it’s actually creating a new DOM element (even though the ID stays the same). Your original code runs once when the page first loads, so it misses the fresh button that gets added later. Let’s fix this with two solid approaches:

Approach 1: Use MutationObserver (Recommended) #

This is the most efficient method because it listens for DOM changes and triggers the click only when the button is updated or re-added. Here’s the full script:

// ==UserScript==
// @name         Auto Click Start Visit Button
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  Auto clicks the start visit button even after page reloads
// @author       You
// @match        YOUR_TARGET_PAGE_URL_HERE
// @grant        none
// ==/UserScript==

(function() {
    'use strict';

    // Function to find and click the button
    function clickStartVisitButton() {
        const startBtn = document.getElementById('btnStartVisit');
        // Only click if the button exists and hasn't been clicked yet (optional check)
        if (startBtn && !startBtn.classList.contains('already-clicked')) {
            startBtn.click();
            startBtn.classList.add('already-clicked'); // Mark as clicked to avoid repeats
            console.log('Clicked the start visit button!');
        }
    }

    // Run once on initial page load
    clickStartVisitButton();

    // Set up MutationObserver to watch for DOM changes
    const observer = new MutationObserver((mutations) => {
        mutations.forEach(mutation => {
            // Check if any nodes were added, or if the button's attributes changed
            if (mutation.addedNodes.length || mutation.type === 'attributes') {
                clickStartVisitButton();
            }
        });
    });

    // Observe the entire body (or narrow it down to the button's parent container for efficiency)
    observer.observe(document.body, {
        childList: true,
        subtree: true,
        attributes: true,
        attributeFilter: ['style'] // Optional: Only watch for style changes (matches your button's reload behavior)
    });
})();

How this works: #

• The clickStartVisitButton function handles the actual click logic, with an optional check to avoid repeated clicks.
• We run this function once right when the script loads to catch the initial button.
• The MutationObserver watches for new elements being added to the DOM (like the reloaded button) or changes to the button’s attributes (like the new style property). When either happens, it triggers the click function again.

Approach 2: Interval Check (Simpler, Less Efficient) #

If you want a quicker fix without dealing with observers, you can use a timed interval to periodically check for the button. This works but uses more resources since it runs every X milliseconds:

// ==UserScript==
// @name         Auto Click Start Visit Button
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  Auto clicks the start visit button even after page reloads
// @author       You
// @match        YOUR_TARGET_PAGE_URL_HERE
// @grant        none
// ==/UserScript==

(function() {
    'use strict';

    function clickStartVisitButton() {
        const startBtn = document.getElementById('btnStartVisit');
        if (startBtn && !startBtn.classList.contains('already-clicked')) {
            startBtn.click();
            startBtn.classList.add('already-clicked');
            console.log('Clicked the start visit button!');
        }
    }

    // Initial click
    clickStartVisitButton();

    // Check every 1 second (adjust the 1000 to change interval)
    setInterval(clickStartVisitButton, 1000);
})();

Quick Notes: #

• Replace YOUR_TARGET_PAGE_URL_HERE with the actual URL of the page you’re targeting.
• The already-clicked class is optional—remove it if you want the button to be clicked every time it reloads (instead of just once per page session).
• For better performance with MutationObserver, replace document.body with the specific parent element that contains the button (e.g., document.getElementById('button-container')) if you know it.

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