Tampermonkey 脚本看不到 ajax 加载的元素

问题描述 投票:0回答:0

我正在尝试在 Chrome 中为我在工作中一直使用的网站编写 Tampermonkey 脚本。我希望脚本删除某个类或标题的按钮上的禁用属性。在我看来,这似乎是一项非常简单的任务,但由于该网站大量使用 Ajax,我遇到了麻烦。

当我第一次加载网站时,有一个标题,一个左侧边栏,占据屏幕其余部分的主应用程序窗口是空白的。

Header and footer only

用户将单击标题或侧边栏中的可用选项之一,并通过 ajax 将内容加载到主应用程序窗口中。主应用程序窗口有一个标题,其中包含新选项卡出现的选项卡,我可以在打开的选项卡和关闭选项卡之间切换。主应用程序窗口主体是所有内容出现的地方,根据我正在处理的内容,有许多不同的格式。

With main application content loaded

我已经能够成功地为标题和侧边栏中出现的按钮执行选择器并禁用/启用它们。对于通过 ajax 加载到主应用程序窗口的任何按钮,我无法获得任何选择器查询结果。我还尝试将我的 Tampermonkey 脚本设置为通过“上下文菜单”运行。当我导航到我试图修补的按钮所在的页面并右键单击 -> Tampermonkey -> 启用按钮时,它找不到按钮。

到目前为止,这是我的 Tampermonkey 脚本,它需要 JQuery 和 waitForKeyElements(),这是我通过关于 ajax 内容的堆栈溢出的其他问题发现的:

// ==Userscript==
// @name     Enable buttons
// @match    my.website.url.org
// @require  https://code.jquery.com/jquery-3.6.4.min.js
// @require  https://gist.github.com/raw/2625891/waitForKeyElements.js
// @version  0.1
// ==/Userscript==

(function() {
    waitForKeyElements ('button.btn.ripple.primary', modifyButtons, false);

    function modifyButtons(jNode) {
        console.log ("~~~~~~~~ Button has been encountered ~~~~~~~~");
        var buttons = document.querySelectorAll('button.btn.ripple.primary');
        
        for (var i=0; i<buttons.length; i++) {
            buttons[i].disabled = false;
            console.log(i + " buttons touched and enabled.");
        }
    }
})();

这是我要修改的按钮的 HTML:

<button type="button" title="Create" class="btn ripple primary" disabled>
    <span>Create</span>
</button>

我也试过:

waitForKeyElements ('button[title="Create"]', modifyButtons, false);

这些都不会触发 modifyButtons 功能,即使我通过右键单击菜单在正确的页面上手动运行脚本。

标题和侧边栏中有按钮,我已成功触发 modifyButtons 函数来测试我的脚本。这是侧边栏按钮之一的 HTML:

<button title="Search" class="pull-right blue__btn sat-stroked-button">
    <span class="sat-button-wrapper">
        Search
    </span>
</button>

这些类的侧边栏中有六个按钮,我能够在所有六个按钮上触发 modifyButtons 函数:

waitForKeyElements ('button.pull-right.blue__btn.sat-stroked-button', modifyButtons, false);

我能够通过以下方式在侧边栏中的一个特定按钮上触发 modifyButtons 函数:

waitForKeyElements ('button[title="Search"]', modifyButtons, false);

过去,我已经弄乱了

buttons[i].disabled = false;
buttons[i].disabled = true;
当我让它触发侧边栏中的按钮时,它完成了我需要的东西。我只需要它在这个阶段实际看到并触发主应用程序窗口中的按钮。

  1. 如何获取 Tampermonkey 脚本以查看通过 ajax 加载到主应用程序窗口中的元素?
  2. 是否有任何特定的 Tampermonkey 运行在(文档开始、文档正文、文档结束、文档空闲或上下文菜单)设置比其他更适合 ajax 网站?我希望它在每次到达相应页面后无需手动右键单击并运行脚本即可工作。
jquery ajax jquery-selectors greasemonkey tampermonkey
© www.soinside.com 2019 - 2024. All rights reserved.