我正在尝试构建一个改变the tag page in the user-profile section of Stack Overflow上标签着色/布局的脚本。
我测试了脚本并运行了。问题是当我点击排序选项[投票]和[名称]时,我想重新运行它。
我试过了:
ready
事件。onclick
处理程序(因为它在页面重新加载之前运行,所以没用)。load
事件监听器附加到表中无济于事。我确信我错过了一些非常明显的东西。我怀疑有一些异步重载涉及,但我无法理解做这项工作所需的操作是什么。
任何人都可以解释我缺少的东西(或者指出一些解释它的文档)吗?
答案 0 :(得分:4)
这是一个常见问题。该页面使用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 *****
}