如何更改 ajax 驱动页面中的所有链接？

Question

我有一个用户脚本，可以修改 IP 直连 Google 搜索页面上所有适用链接的 href：

// ==UserScript==
// @name     _Modify select Google search links
// @include  http://YOUR_SERVER.COM/YOUR_PATH/*
// @include  http://62.0.54.118/*
// ==/UserScript==

var qLinks  = document.querySelectorAll ("a[href*='?q=']");

for (var J = qLinks.length - 1;  J >= 0;  --J) {
    var oldHref = qLinks[J].getAttribute ('href');
    var newHref = oldHref.replace (/\?q=/, "?&q=");

    //console.log (oldHref + "\n" + newHref);
    qLinks[J].setAttribute ('href', newHref);
}

它在第一页上工作正常，但是当我使用分页链接时，它停止工作——因为新页面是由 AJAX 加载的。

@Brock Adams 告诉我使用 waitForKeyElements()，但我不知道该怎么做。

我看过一些主题，例如stackoverflow.com/questions/10888326/executing-javascript-script-after-ajax-loaded-a-page-doesnt-work，但我不知道如何使用它们。

如何使用该脚本更改 AJAX 页面上的链接，例如：

http://62.0.54.118/search?&q=42&oq=42&sourceid=chrome&ie=UTF-8&filter=0#filter=0&q=42&start=10

Answer 1

要将静态页面代码更改为使用 waitForKeyElements()，您需要完成 3 或 4 个简单任务：

1. 在脚本的元数据部分中包含 jQuery 和 waitForKeyElements。
2. 为waitForKeyElements 选择适当的jQuery 选择器。它通常与您用于 querySelectorAll() 的相同。
3. 为单个节点调整任何循环驱动的代码。酌情利用 jQuery。
4. 在这种情况下，当您翻页时，Google 会覆盖链接，而不是使用 AJAX 来放置新链接。所以让回调函数返回true。

综上所述，基于问题代码的完整脚本将是：

// ==UserScript==
// @name     _Modify select Google search links
// @include  http://YOUR_SERVER.COM/YOUR_PATH/*
// @include  http://62.0.54.118/*
// @require  http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/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 ("a[href*='?q=']", changeLinkQuery);

function changeLinkQuery (jNode) {
    var oldHref = jNode.attr ('href');
    var newHref = oldHref.replace (/\?q=/, "?&q=");

    jNode.attr ('href', newHref);

    return true;
}