等待动态网页内容加载办法

zip11 · 发表于 2024-4-17 14:14:45

查找网页是否存在特定字符串，结果就是找不到
查看网页源代码，也没有显示

查找资料了解到，网页内容是通过 JavaScript 动态生成的，此时可能需要等待页面加载完成后再获取内容

程序例子等待 .floor-show 元素，再开始查找网页内容字符串

初学者代码可以不完全看懂，会模板套用，慢慢加强了解


// ==UserScript==
// @name         Wait for .floor-show
// @namespace    http://tampermonkey.net/
// @version      1.0
// @description  Wait for an element with class "floor-show" to load before running the script
// @author       Your Name
// @match        https://*/*
// @grant        none
// @run-at       document-end
// ==/UserScript==

(function() {
    'use strict';

    // 函数，当目标元素加载后将被调用
    function onElementLoaded(element) {
        console.log('元素加载完成:', element);
        // 在这里写你的逻辑
    }

    // 创建一个观察器实例并传入一个回调函数
    const observer = new MutationObserver(function(mutations, me) {
        // 查找页面上带有 'floor-show' 类的元素
        const element = document.querySelector('.floor-show');
        if (element) {
            onElementLoaded(element); // 调用函数
            me.disconnect(); // 停止观察
            return;
        }
    });

    // 开始观察文档对象模型（DOM）的变化，配置对象指定了我们想要观察的变化类型
    observer.observe(document.documentElement, {
        childList: true,
        subtree: true
    });
})();