如何在JavaScript中等待下一页加载（TamperMonkey脚本场景）

方案1：利用TamperMonkey自带配置（最简单易上手） #

TamperMonkey本身支持控制脚本的运行时机，直接在脚本头部添加配置，就能自动等待页面完全加载：

// ==UserScript==
// @name         多页面任务脚本
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  主页点击链接+目标页面执行后续操作
// @author       你的名字
// @match        替换成你的网站主页URL
// @match        替换成点击后跳转的目标页面URL
// @run-at       document-idle
// ==/UserScript==

• @match要同时填主页和目标页面的URL，确保脚本在两个页面都能触发
• document-idle表示脚本会等页面所有资源加载完成后再执行，不用自己写等待逻辑

然后拆分任务，通过当前页面URL判断执行逻辑：

(function() {
    'use strict';

    const homepageUrl = "替换成你的网站主页URL";
    const targetPageUrl = "替换成跳转后的目标页面URL";

    // 当前在主页：执行点击操作
    if (window.location.href.includes(homepageUrl)) {
        // 用选择器找到要点击的链接，比如按class、id或文本
        const targetLink = document.querySelector("a.link-class");
        if (targetLink) {
            targetLink.click();
        }
    }
    // 当前在目标页面：执行后续任务
    else if (window.location.href.includes(targetPageUrl)) {
        // 这里写你要在目标页面做的操作
        console.log("目标页面加载完成，开始执行任务");
    }
})();

方案2：手动监听动态加载内容（适合非整页刷新的场景） #

如果目标页面是动态加载内容（比如点击链接后只刷新部分区域），可以用一个简单的工具函数等待元素出现：

// 等待指定元素出现的工具函数
function waitForElement(selector, timeout = 5000) {
    return new Promise((resolve, reject) => {
        // 每隔100毫秒检查一次元素是否存在
        const checkInterval = setInterval(() => {
            const element = document.querySelector(selector);
            if (element) {
                clearInterval(checkInterval);
                resolve(element);
            }
        }, 100);

        // 超时后停止检查
        setTimeout(() => {
            clearInterval(checkInterval);
            reject(new Error(`等待元素超时：${selector}`));
        }, timeout);
    });
}

// 在目标页面使用这个函数
if (window.location.href.includes(targetPageUrl)) {
    // 等待目标元素出现后再执行操作
    waitForElement(".target-element-class").then(element => {
        // 对找到的元素执行操作
        console.log("目标元素已加载，开始处理");
    }).catch(err => {
        console.error(err);
    });
}

关于Promise和async/await的说明 #

你提到学这些感到困惑，其实对你的场景来说：

• 优先用方案1，完全不需要Promise就能解决大部分整页跳转的等待问题
• 如果遇到动态加载场景，方案2里的工具函数已经封装好了Promise逻辑，你直接调用就行，不用自己写复杂代码
• 要是之后想深入学习，先从「回调函数→Promise→async/await」的顺序入手，核心是理解“等待异步操作完成后再执行下一步”这个逻辑，再对应到页面加载的场景就行

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