javascript - 对内部选项卡(不是浏览器选项卡)的更改运行 Greasemonkey 脚本？

Question

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

我测试了脚本并且它运行了。问题是当我单击排序选项 [votes] 和 [name] 时，我想重新运行它。

我试过:

1. 触发 jQuery ready 事件。
2. 附加一个 onclick 处理程序(这是无用的，因为它在页面重新加载之前运行)。
3. 将 load 事件监听器附加到带有标签等的表上，但无济于事。

我确定我在这里遗漏了一些非常明显的东西。我怀疑涉及一些异步重新加载，但我无法理解使这项工作所需的操作是什么。

谁能解释我遗漏的内容(或指出一些解释它的文档)？

Answer 1

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

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

1. 使用强大的轮询实用程序，例如 waitForKeyElements() .这需要加载外部脚本(通常不是问题)，并且需要 jQuery，无论如何您都应该使用它。下面详细介绍了这种方法。

2. 触发 hashchange 事件。有些页面非常好，可以在 AJAX 更改页面时触发此事件。不幸的是，Stack Overflow 不是那些“礼貌”的网站之一。 ;-)

3. 触发对 URL 的其他更改。有些页面非常好，可以在 AJAX 更改内容时更改 URL。 Stack Overflow 会这样做。
   不幸的是，在 SO 的情况下，URL 会立即更改，而实际页面更改会在可变(不可预测的)延迟之后发生。这意味着您还必须使用其他技术之一。

4. 拦截页面的 AJAX。这可能会变得复杂和困惑，并且通常仍然需要轮询或延迟，因为实际页面更改可能会在 AJAX 请求完成后的可变时间间隔内发生。从页面可能产生的多种类型中识别正确的 AJAX 请求也可能很麻烦。

5. 使用 MutationObserver。这可能是最强大的技术，并且是变化驱动的而不是轮询。但它在大多数情况下都有些矫枉过正，实现起来可能很棘手，并且可能会因 CPU 峰值而“卡住”计算机。

6. 请注意，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 *****
}