Question

我正在尝试构建一个改变the tag page in the user-profile section of Stack Overflow上标签着色/布局的脚本。

我测试了脚本并运行了。问题是当我点击排序选项[投票]和[名称]时，我想重新运行它。

我试过了：

触发jQuery ready事件。
附加onclick处理程序（因为它在页面重新加载之前运行，所以没用）。
使用标签等将load事件监听器附加到表中无济于事。

我确信我错过了一些非常明显的东西。我怀疑有一些异步重载涉及，但我无法理解做这项工作所需的操作是什么。

任何人都可以解释我缺少的东西（或者指出一些解释它的文档）吗？

Answer 1

这是一个常见问题。该页面使用AJAX来替换其部分内容。因此，触发jQuery的ready事件将不起作用，因为只会在初始页面加载后触发。

以下是常用的解决方法/方法供参考。我只推荐第一个：

使用强健的轮询实用程序，例如waitForKeyElements()。这需要加载一个外部脚本（通常不是问题），它需要jQuery，你应该使用它。这种方法详述如下。
触发hashchange事件。当AJAX更改页面时，有些页面足以触发此事件。不幸的是，Stack Overflow不是那些“礼貌”网站之一。 ; - ）
触发对网址的其他更改。当AJAX更改内容时，有些页面足以改变URL。 Stack Overflow 确实执行此操作。
不幸的是，URL在SO的情况下立即改变，而实际的页面改变发生在变量（不可预测的）延迟之后。这意味着您还必须使用其他技术之一。
拦截页面的AJAX。这可能会变得复杂和混乱，并且通常仍需要轮询或延迟，因为实际页面更改可能在AJAX请求完成后的可变间隔内发生。从页面可能构成的许多类型中识别正确的AJAX请求也可能很烦人。
使用MutationObserver s。这可能是最强大的技术，并且与轮询相比是变革驱动的。但是在大多数情况下这样做太过分了，实施起来可能很棘手，而且可以“冻结”带有CPU峰值的计算机。
请注意，较旧的技术 Mutation Events 已过时且已弃用，原因很多。尽管某些浏览器尚未删除此功能，但请勿尝试使用它。

在几乎所有针对AJAX驱动的页面的脚本中，我们真正想要的是对某些类型的内容采取行动。艺术是识别内容，然后只要添加或替换我们的目标有效负载，就可以轻松使用像waitForKeyElements()这样的实用程序。

在您的情况下，内容似乎是此HTML中显示的标记列表：

<div id="user-tab-tags">
    ...
    <div class="user-tab-content">
        <table class="user-tags">
            ...
        </table>
    </div>
    ...
</div>

每次更改该标签的排序/分页选项时都会替换table.user-tags。

因此该内容的jQuery选择器将是：

"#user-tab-tags div.user-tab-content table.user-tags"

和完整脚本将是：

// ==UserScript==
// @name     _AJAX_compensation techniques
// @include  http://stackoverflow.com/users/*
// @require  http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js
// @require  https://gist.github.com/raw/2625891/waitForKeyElements.js
// @grant    GM_addStyle
// ==/UserScript==
/*- The @grant directive is needed to work around a design change
    introduced in GM 1.0.   It restores the sandbox.
*/

waitForKeyElements (
    "#user-tab-tags div.user-tab-content table.user-tags",
    customStyleUserTags
);

function customStyleUserTags (jNode) {
    jNode.css ("background", "lime");
    //***** YOUR CODE HERE *****
}

对更改内部选项卡（而不是浏览器选项卡）运行Greasemonkey脚本？

1 个答案: