1

頻繁に使用する Web サイトのメッセージ システムを変更するスクリプトを作成しています。各メッセージ スレッドの上部にボタンを追加します。クリックすると、スレッド内の最新のメッセージに自動的に移動します。

私が抱えている問題は、メッセージがphpによってロードされ、メッセージがロードされる前にスクリプトが起動することです。また、サイトはすべてのメッセージ スレッドを同時にロードするわけではありません。10 程度が読み込まれ、下にスクロールするとさらに読み込まれます。メッセージスレッドごとにボタンをロードする方法はありますか、それとも到達不可能な目標を目指していますか?

// ==UserScript==
// @name          Imgur - Message Viewer
// @namespace     Basion
// @description   It skips to the bottom of the most recent message
// @author        Basion
// @include       http://imgur.com/*
// @include       https://imgur.com/*
// @include       http://*.imgur.com/*
// @include       https://*.imgur.com/*
// @run-at        document-end
// ==/UserScript==
var messages = document.getElementsByClassName("thread-wrapper");

var newA = document.createElement('a');

for (var i = 0; i < messages.length; i++) {
    newA.addEventListener("click", scrollToMessage(i), true);
    newA.innerText = "Go to Newest Message";
    messages[i].appendChild(newA);
}
function scrollToMessage(id) {
    var newMessages = document.getElementsByClassName('thread-wrapper');
    newMessages[id].scrollIntoView(false);
}
4

1 に答える 1

1

AJAX 経由で追加された要素を処理するには、jQueryを使用し、 「同じページで Greasemonkey スクリプトを複数回実行しますか?」にwaitForKeyElements示すように、. 便利な jQuery リファレンスを 次に示します。

また、ID をイベント リスナーに送信することはできません。

質問のコードとImgurのターゲットページに適合した、完全に機能するジャンプ後のスクリプトを次に示します。

// ==UserScript==
// @name          Imgur - Message Viewer
// @namespace     Basion
// @description   It skips to the bottom of the most recent message
// @author        Basion
// @include       http://imgur.com/*
// @include       https://imgur.com/*
// @include       http://*.imgur.com/*
// @include       https://*.imgur.com/*
// @run-at        document-end
// @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 ("div.thread-wrapper", addJumpButton);

/*-- Prepend a button to the top of each thread.  Don't add in the header, to
    avoid conflicts with the open/close toggle.
*/
function addJumpButton (jNode) {
    jNode.prepend (
        '<a href="#" class="gmThreadJmpBtn">Go to Newest Message in thread</a>'
    );
}

//-- Activate *all* the jump buttons with one jQuery function.
$("div.notifications").on (
    "click", "div.thread-wrapper a.gmThreadJmpBtn", jumpToEndOfThread
);

function jumpToEndOfThread (zEvent) {
    //-- The last (newest) message will be just above the "reply bar".
    var thisThreadHdr   = $(zEvent.target);
    var targetDiv       = thisThreadHdr.nextAll ("div.reply.striped");
    targetDiv[0].scrollIntoView (false);

    //-- Block the page handlers from also firing for this link.
    zEvent.stopPropagation ();
    zEvent.preventDefault ();
}
于 2013-05-27T13:57:34.167 に答える