如何检测Greasemonkey的页面中的特定链接的点击？ [英] How to detect clicks on specific links in page with Greasemonkey?

问题描述

确定...我的虚拟宠物网站之一，因此我决定调整Greasemonkey脚本另一个网站...原来的脚本只是弹出一个警报，当你发现一个鸡蛋，所以你不要点击过去 - 我以为这会很容易计算我遇到多少鸡蛋。 2小时后，我终于找到了一种方法来保持变量过去的页面重新加载 - 成功！然后，我决定我想跟踪我有多少步骤，我采取... ARGGGG！应该很简单，但不是！

在页面上有三个可能的探索链接点击（显示图像没有链接）。 3小时后，我发现事件侦听器，并可以在我点击页面上的任何地方时发出警告弹出窗口，但如何检查只有这3个链接中的1个的点击？所有3个链接具有相同的一般格式： http://unicreatures.com/explore.php?area=***&id=***&key=**** 其中 * 是可更改的。

目标网页 http://unicreatures.com/explore.php?area=grassland 应在无帐户，如果不让我知道，我会抓住源代码。

  // == UserScript == 
 // @name Unicreatures Egg pop-up 
 // @namespace Unicreatures Egg pop-up 
 // @description Unicreatures Egg pop-up 
 // @include http://unicreatures.com/explore.php* 
 // @include http： //www.unicreatures.com/explore.php* 
 // == / UserScript == 
 
 var y = document.body.innerHTML; 
 
 //document.addEventListener（'click'，function（）{alert（'page clicked'）}，true）; 
 
 if（y.indexOf（You find a Noble）> 0）
 {
 alert（'Noble Egg Alert'）; 
} 
 
 if（y.indexOf（You find a Exalted）> 0）
 {
 localStorage.exaltedEggCount = Number（localStorage.exaltedEggCount） 1; 
 alert（'Exalted Egg Alert'+ localStorage.exaltedEggCount）; 
} 
 
 if（y.indexOf（egg nearby！）> 0）
 {
 localStorage.eggCount = Number（localStorage.eggCount）+1 ; 
 
 alert（'Egg Alert'+ localStorage.eggCount）; 
} 
  

我真的意识到if语句的写法，如果前2个触发器之一（我没有写这部分，只是使警报独特）...我很好与那个现在。我读了一些关于获取元素id或东西，但我找不到它解释任何地方足够好让我获得。

请仅javascript，没有jquery ...我还很少得到javascript at this moment ...请解释答案，以便我理解如何工作 - 我不只是想要的代码片断，让我回来一个类似的问题，因为我不明白为什么使用一点代码。 p>

另一个问题，除非我应该为它打开另一个问题...当你发现一个鸡蛋文本说你发现一个崇拜的***鸡蛋附近或您在附近找到一个***蛋。是否有办法从页面中获取 *** 部分？

谢谢！ b $ b

解决方案

您可以向页面上的特定元素添加事件处理程序。如果元素有 id 属性，这很容易：

  var element = document.getElementById（'whatever'）; 
 
 element.addEventListener（'click'，function（）{
 alert（'element clicked'）; 
}，true）; 
  

这会将事件监听器添加到ID为whatever的元素。

如果元素没有ID属性，您需要更具创意。这里有一种方法：

  var links = document.getElementsByTagName（'a'）; 
 
 for（var i = 0; i< links.length; i ++）{
 var link = links [i]; 
 if（/area=grassland/.test（link.href））{
 link.addEventListener（'click'，function（）{
 alert（'grassland link clicked'）; 
}，true）; 
} 
} 
  

/ area = grassland / 是与 regexp 匹配的包含area = grassland作为子字符串的字符串。 （如果您愿意，可以使用正则表达式进行更多操作。）我们对每个链接（ a 元素），并将 href 属性与正则表达式匹配的单击处理程序。 / p>

根据需要，您可以在 link.textContent 的链接中获取文本匹配。它不会像这样好的图像链接，但。 （但你总是可以找到， link.getElementsByTagName（'img'）[0] 链接中的第一个图像标签，并从那里工作。）

---

至于你的第二个问题，regexps也是你的朋友：

  var regexp = /你找到了吗？ （exalted）？（。*？）鸡蛋附近/; 
 var match = regexp.exec（document.body.textContent）; 
 if（match）{
 if（match [1]）{
 alert（Exalted egg found：+ match [2]）; 
} else {
 alert（Normal egg found：+ match [2]）; 
} 
} 
  

请参阅上面给出的关于regexp工作原理的链接以及如何修改它以更好地适合您的需要。

（Ps。警告：我没有实际测试任何上面的代码，因为我不觉得在游戏网站上创建一个试用帐户只是为了，我希望它是正确的，但可能有错误或打字错误。）

Ok... one of my virtual pet sites was down so I decided to tweak a Greasemonkey script for another site... the original script just pops up an alert when you find an egg so you don't click past it - I thought it would be simple to count how many eggs I came across. After 2 hours I finally found a way to keep a variable past page reloads - SUCCESS!! Then I decided I wanted to keep track of how many "steps" I was taking... ARGGGG!!!! Should be simple but isn't!
On the page there are three possible explore links to click (shows image not link). 3 hours later I found the event listener and can make an alert popup when I click anywhere on the page, but how do I check for clicks only on 1 of those 3 links? All 3 links have the same general format: http://unicreatures.com/explore.php?area=***&id=***&key=**** where the * are changeable.

Target page http://unicreatures.com/explore.php?area=grassland should be accessible without an account, if not let me know and I'll grab the source code.

// ==UserScript==
// @name Unicreatures Egg pop-up
// @namespace Unicreatures Egg pop-up
// @description Unicreatures Egg pop-up
// @include http://unicreatures.com/explore.php*
// @include http://www.unicreatures.com/explore.php*
// ==/UserScript==

var y = document.body.innerHTML;

//document.addEventListener('click', function(){alert('page clicked')}, true);

if(y.indexOf("You find a Noble")> 0)
{
alert('Noble Egg Alert');
}

if(y.indexOf("You find an Exalted")> 0)
{
localStorage.exaltedEggCount=Number(localStorage.exaltedEggCount)+1;
alert('Exalted Egg Alert '+localStorage.exaltedEggCount);
}

if(y.indexOf("egg nearby!")> 0)
{
localStorage.eggCount=Number(localStorage.eggCount)+1;

alert('Egg Alert '+localStorage.eggCount);
}

I do realize that the way the if statements are written that I get double alerts if either of the first 2 trigger(I didn't write that part, just made the alerts unique)... I'm fine with that for now. I did read something about get element id or something but I couldn't find it explained anywhere good enough for me to "get".
Please javascript only, no jquery... I'm still barely getting javascript at the moment... please explain answers so I understand how something works - I don't just want code snippets that leave me coming back with a similar question because I don't understand why a bit of code was used.

And one other question unless I should open another question for it... when you find an egg the text says You find an Exalted *** egg nearby or You find a *** egg nearby. Is there a way to grab the *** part from the page?

Thanks!

解决方案

You can add event handlers to specific elements on a page. If the element has an id attribute, this is easy:

var element = document.getElementById( 'whatever' );

element.addEventListener( 'click', function () {
    alert( 'element clicked' );
}, true );

This will add the event listener to the element with the ID "whatever".

If the element doesn't have an ID attribute, you'll need to be a bit more creative. Here's one way to do it:

var links = document.getElementsByTagName( 'a' );

for ( var i = 0; i < links.length; i++ ) {
    var link = links[i];
    if ( /area=grassland/.test( link.href ) ) {
        link.addEventListener( 'click', function () {
             alert( 'grassland link clicked' );
        }, true );
    }
}

The /area=grassland/ is a regexp which matches strings that contain "area=grassland" as a substring. (You can do a lot more with regexps if you want.) We test it against every link (a element) on the page, and add the click handler to those whose href attribute matches the regexp.

By the want, you can get the text inside a link with link.textContent, if you'd prefer to match against that. It won't work so well with image links, though. (But you could always find, say, the first image tag inside the link with link.getElementsByTagName( 'img' )[0] and work from there.)

---

As for your second question, regexps are your friend there too:

var regexp = /You find an? (Exalted )?(.*?) egg nearby/;
var match = regexp.exec( document.body.textContent );
if ( match ) {
    if ( match[1] ) {
        alert( "Exalted egg found: " + match[2] );
    } else {
        alert( "Normal egg found: " + match[2] );
    }
}

See the links I gave above for how that regexp works and how to modify it to better suit your needs.

(Ps. Warning: I didn't actually test any of the code above, as I didn't feel like creating a trial account on the game site just for that. I hope it's correct, but there might be bugs or typos in it.)

这篇关于如何检测Greasemonkey的页面中的特定链接的点击？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！