我正在尝试构建一个脚本来改变 the tag page in the user-profile section of Stack Overflow 上标签的颜色/布局。
我测试了脚本并且它运行了。问题是当我单击排序选项 [votes] 和 [name] 时，我想重新运行它。
我试过了：
ready 事件。onclick 处理程序（这是无用的，因为它在页面重新加载之前运行）。load 事件侦听器附加到带有标签等的表中，但无济于事。我确定我在这里遗漏了一些非常明显的东西。我怀疑涉及到一些异步重新加载，但我不明白完成这项工作所需的操作是什么。
谁能解释我遗漏了什么（或指出一些解释它的文档）？
【问题讨论】：
标签： javascript jquery ajax greasemonkey
这是一个常见问题。该页面使用 AJAX 仅替换其部分内容。因此触发 jQuery 的 ready 事件将不起作用，因为它只会在初始的完整页面加载后触发。
以下是常用的解决方法/方法以供参考。我只推荐第一个：
使用强大的轮询实用程序，例如 waitForKeyElements()。这需要加载一个外部脚本（通常不是问题），并且它需要 jQuery，无论如何您都应该使用它。下面详细介绍了这种方法。
触发hashchange 事件。当 AJAX 更改页面时，有些页面可以很好地触发此事件。不幸的是，Stack Overflow 不是那些“礼貌”的网站之一。 ;-)
触发对 URL 的其他更改。当 AJAX 更改内容时，有些页面可以很好地更改 URL。 Stack Overflow会这样做。
不幸的是，在 SO 的情况下，URL 立即更改，而实际页面更改发生在可变（不可预测的）延迟之后。这意味着您还必须使用其他技术之一。
拦截页面的 AJAX。这可能会变得复杂和混乱，并且通常仍然需要轮询或延迟，因为实际的页面更改可能会在 AJAX 请求完成后的可变时间间隔内发生。在页面可能产生的多种类型中识别正确的 AJAX 请求也可能很麻烦。
使用MutationObservers。这可能是最强大的技术，并且是变革驱动而不是轮询。但在大多数情况下，这有点过头了，实施起来可能很棘手，并且会在 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 *****
}
【讨论】：