Greasemonkey与jQuery，如何编写greasemonkey脚本来修改页面DOM元素？ [英] Greasemonkey with jQuery, how to write the greasemonkey script to modify page DOM elements?

问题描述

从greasemonkey wiki页面，有一个使用jQuery和greasemonkey的例子。代码列在下面，页面的位置是 http://wiki.greasespot.net/Third -Party_Libraries＃jQuery

  // == UserScript == 
 // @name jQuery示例
 // @require http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js 
 // == / UserScript == 
 
 //使用jQuery库向id someText的元素附加一些文本。 
 $（＃someText）。append（more text。）; 
  

此示例脚本直接修改DOM。我需要使用 jQuery函数围绕代码：

  // == UserScript == 
 // @name jQuery示例
 // @require http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min。 js 
 // == / UserScript == 
 
 //使用jQuery库为id someText的元素添加一些文本。 
 jQuery（function（）{
 $（＃someText）。append（more text。）; 
}）
  pre> 
 
 
我问这个问题是因为我的greasemonkey代码在每次刷新页面时都不执行。关于这个问题的任何想法？ 
谢谢。
解决方案
不，在中包装脚本代码没有意义jQuery（）调用，也不使用 $（document）.ready（）。
 
 
 
 Greasemonkey自动触发 DOMContentLoaded 事件（与jQuery包装器或就绪事件相同），并且在GM的版本的jQuery加载之后。
 
 
 
另请注意，该wiki页面已经过时。通用工具可以与jQuery 1.6.2一起使用。
 
 
 
您没有显示相关代码或链接到目标页面，但是，每次刷新页面时，Greasemonkey代码不执行的最可能的原因是：
 
 
 
 GM脚本中有错误。
 
 
 
 
目标内容是通过AJAX单独加载的。
 
您可以使用代码在这种模式下，要解决这个问题：
  // ---这将处理页面加载延迟和AJAX更改。 
 setInterval（function（）{checkForTweetbox（）;}，500）; 
 
函数checkForTweetbox（）{
 var tweetbox = document.querySelector（'div.tweet-box textarea'）; 
 if（tweetbox）{
 if（！tweetbox.weHaveProcessed）{
 tweetbox.weHaveProcessed = true; 
 alert（'New tweet-box found！'）; 
} 
} 
} 
  
 
 
 
 
From the greasemonkey wiki page, there is an example using jQuery with greasemonkey. The code is listed below and the location of the page is http://wiki.greasespot.net/Third-Party_Libraries#jQuery
// ==UserScript==
// @name          jQuery Example
// @require       http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js
// ==/UserScript==

// Append some text to the element with id someText using the jQuery library.
$("#someText").append(" more text.");
This example script modify the DOM directly. Do I need to surround the code with a jQuery function like this:
// ==UserScript==
// @name          jQuery Example
// @require       http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js
// ==/UserScript==

// Append some text to the element with id someText using the jQuery library.
jQuery(function(){
    $("#someText").append(" more text.");   
})
I ask this question is because my greasemonkey code is not executed every time the page is refreshed. Any ideas on this issue?
Thanks.
解决方案
No, there is no point in wrapping your script code in a jQuery() call, nor in using $(document).ready ().

Greasemonkey automatically fires after both the DOMContentLoaded event (same as the jQuery wrapper or ready event), and after GM's version of jQuery is loaded.

Also note that that wiki page is outdated.  GM works fine with jQuery 1.6.2 now.

You didn't show the relevant code, nor link to the target page, but the most-likely reasons the "Greasemonkey code is not executed every time the page is refreshed" are:

There is an error in the GM script.
The target content is loaded separately, via AJAX.

You can use code in this pattern, to get around that:
//--- This handles both page-load delays, and AJAX changes.
setInterval (function() { checkForTweetbox (); }, 500);

function checkForTweetbox () {
    var tweetbox = document.querySelector ('div.tweet-box textarea');
    if (tweetbox) {
        if (! tweetbox.weHaveProcessed) {
            tweetbox.weHaveProcessed    = true;
            alert ('New tweet-box found!');
        }
    }
}



                        
这篇关于Greasemonkey与jQuery，如何编写greasemonkey脚本来修改页面DOM元素？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！