2

StackOverflowのユーザープロファイルセクションにあるタグページのタグの色付け/レイアウトを変更するスクリプトを作成しようとしています。

スクリプトをテストして実行しました。問題は、並べ替えオプション[投票]と[名前]をクリックしたときに再実行したいということです。

私が試してみました：

  1. jQueryreadyイベントをトリガーします。
  2. ハンドラーをアタッチしonclickます（ページがリロードされる前に実行されるため、これは役に立ちません）。
  3. タグなどを使用してイベントリスナーをテーブルにアタッチしloadても無駄になります。

私はここで非常に明白な何かを見逃していると確信しています。非同期のリロードが関係しているのではないかと思いますが、これを機能させるために必要なアクションが何であるか理解できません。

誰かが私が欠けているものを説明できますか（またはそれを説明するいくつかのドキュメントを私に指摘できますか）？

4

1 に答える 1

4

これは一般的な問題です。そのページは AJAX を使用して、コンテンツの一部だけを置き換えています。したがって、jQuery のreadyイベントのトリガーは機能しません。これは、最初の完全なページの読み込み後にのみ発生するためです。

参照用の通常の回避策/アプローチを次に示します。私は最初のものだけをお勧めします：

  1. waitForKeyElements()などの堅牢なポーリング ユーティリティを使用します。これには、外部スクリプトをロードする必要があり (通常は問題ありません)、とにかく使用する必要がある jQuery が必要です。このアプローチについては、以下で詳しく説明します。

  2. イベントをトリガーしhashchangeます。一部のページは、AJAX がページを変更したときにこのイベントを発生させるのに十分です。残念ながら、Stack Overflow はそうした「礼儀正しい」サイトの 1 つではありません。;-)

  3. URL への他の変更をトリガーします。一部のページは、AJAX がコンテンツを変更するときに URL を変更するのに十分です。スタック オーバーフローはこれを行います。
    残念ながら、SO の場合、URL はすぐに変更されますが、実際のページの変更は一定の (予測不可能な) 遅延の後に発生します。つまり、他の手法のいずれかも使用する必要があります。

  4. ページの AJAX をインターセプトします。これは複雑で煩雑になる可能性があり、実際のページ変更は AJAX 要求が終了してから可変間隔で発生する可能性があるため、多くの場合、ポーリングまたは遅延が依然として必要です。ページが作成する可能性のある多くのタイプの中から正しい AJAX リクエストを特定することも面倒です。

  5. sを使用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 *****
}
于 2012-12-21T07:40:57.623 に答える