使用Greasemonkey和JQuery向特定頁面添加動態表單

Question

在特定論壇中，單擊答覆按鈕會生成一個帶有文本窗體的新窗口來鍵入答覆。我想實現一個腳本來在主頁面中創建特定的文本格式（而不是產生一個新的窗口）。我會如何去做這件事？

這裏是我想要實現對腳本的網頁源代碼：

http://pastebin.com/2UaUVGJA（主要討論頁） http://pastebin.com/hAx2SPUu（回覆頁）

這裏是企圖腳本（注意，我仍然需要一些方法來提取適當的post_id值，並根據該id創建表單），但根本不起作用。

// ==UserScript== 
// @name   Quick_ReplyTest 
// @namespace  http://userscripts.org/users/181447 
// @description Inserts QuickReply 
// @include  * 
// @require  http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js 
// ==/UserScript== 


/* Optional: 
window.addEventListener ("load", Greasemonkey_main, false); 
*/ 

$(document).ready (Greasemonkey_main); 


function Greasemonkey_main() 
{ 
    /*--- Get the first node inside the id="main" span (Google.com) 
     If that's not there, then get the first node of the html body. 
    */ 
    var TargetNode = $("a[href*='event=reply/post']"); 
    if (!TargetNode) 
     TargetNode = $("body *:first"); 

    $(TargetNode).after 
(
    '<form method="POST" action="http://dl.tccd.edu/index.php/classforums/posts/event=saveReply"> \ 
    <input type="hidden" name="subject" size="45" id="txt_subject" maxlength="200" value="">  \ 
    <br> Message:<br>                    \ 
    <textarea rows="20" style="width:70%;" name="message" id="message"></textarea>     \ 
    <br> <br>                      \ 
    <input type="submit" id="submit_post" value="Post Reply">          \ 
    <input type="hidden" name="post_id" value="1010815">           \ 
    <input type="hidden" name="thread_id" value="1010815">           \ 
    </form>                       \ 
    ' 
); 
} 

Answer 1

好的，這裏是腳本修改，使表格生活。它現在應該起作用，但顯然我不能在沒有登錄的情況下完全測試它。

我試着解釋一下評論的內容和一個方便的jQuery參考：http://www.jqapi.com/。

/* NOTE: Do not use: 
    // @include  * 
    This slows things down and could cause all sorts of interesting side-effects. 
*/ 

// ==UserScript== 
// @name   Quick_ReplyTest 
// @namespace  http://userscripts.org/users/181447 
// @description  Inserts QuickReply 
// @include   http://*.tccd.edu/* 
// @include   https://*.tccd.edu/* 
// @require   http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js 
// ==/UserScript== 


$(document).ready (Greasemonkey_main); 


function Greasemonkey_main() 
{ 
    /*--- Use jQuery to get links (anchor tags) that point to the reply form. 

     The links are of the form: 
      <a href="http://dl.tccd.edu/index.php/classforums/posts/event=reply/post_id=1013402">Reply</a> 
    */ 
    var zTargetNodes = $("a[href*='event=reply/post']");  //-- href contains "event=reply/post". 


    /*--- Now, for each link, extract the post_id and insert the reply form with the post_id filled in. 

     Uses the jQuery each() function. 
    */ 
    zTargetNodes. each (function (iPostNum) {AddReplyForm ($(this), iPostNum);}); 
} 


function AddReplyForm (zJnode, iPostNum) 
{ 
    /*--- Extract the post_id from the link, using the jQuery attr() function and the javascript 
     match() function. 
    */ 
    var sHref  = zJnode.attr ('href'); 
    var sPostID  = (sHref + '&').match (/post_id=([^\&\#]+)[\&\#]/) [1]; 


    /*--- Build up the form HTML-string. Using sPostID for post_id and thread_id. 
     (Or we could just insert the form into the doc, and change the id values after.) 
    */ 
    var sNewHTML = '<form method="POST" action="http://dl.tccd.edu/index.php/classforums/posts/event=saveReply"> \n' 
        + '<input type="hidden" name="subject" size="45" id="txt_subject" maxlength="200" value=""> \n' 
        + '<br> Message:<br> \n' 
        + '<textarea rows="20" style="width:70%;" name="message" id="message"></textarea> \n' 
        + '<br> <br> \n' 
        + '<input type="submit" id="submit_post" value="Post Reply"> \n' 
        + '<input type="hidden" name="post_id"  value="' + sPostID + '"> \n' 
        + '<input type="hidden" name="thread_id" value="' + sPostID + '"> \n' 
        + '</form>' 
        ; 


    /*--- Inject the reply form. 
    */ 
    zJnode.after (sNewHTML); 
}