javascript - 如何使用 Greasemonkey 检测页面中特定链接的点击？

Question

好吧...我的一个虚拟宠物网站宕机了，所以我决定为另一个网站调整 Greasemonkey 脚本...原始脚本只是在您找到鸡蛋时弹出警报，这样您就不会点击它。 - 我认为计算我遇到了多少个鸡蛋会很简单。两个小时后，我终于找到了一种方法来保持变量过去的页面重新加载 - 成功!然后我决定要记录我走了多少“步”...... 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 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);
}

我确实意识到 if 语句的编写方式是，如果前两个触发器中的任何一个触发，我都会收到双重警报(我没有写那部分，只是使警报变得独特)...我对此很满意目前。我确实读过一些关于获取元素 id 或其他内容的内容，但我找不到任何足以让我“获取”的解释。
请仅使用 javascript，不要使用 jquery...我现在还几乎没有得到 javascript...请解释答案，以便我了解某些内容是如何工作的 - 我不只是想要让我带着类似问题回来的代码片段，因为我不明白为什么使用了一些代码。

还有一个问题，除非我应该为此提出另一个问题...当你找到一个鸡蛋时，文本会显示你在附近发现一个尊贵的***蛋或你发现一个* ** 附近有鸡蛋。有没有办法从页面中获取 *** 部分？

谢谢!

Answer 1

您可以将事件处理程序添加到页面上的特定元素。如果元素具有 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”作为子字符串的字符串。 (如果需要，您可以 do a lot more with regexps。)我们针对页面上的每个链接(a 元素)进行测试，并将点击处理程序添加到 href 属性匹配的链接正则表达式。

根据需要，如果您希望与之匹配，您可以使用 link.textContent 获取链接内的文本。不过，它对于图像链接的效果不太好。 (但是您总是可以使用 link.getElementsByTagName( 'img' )[0] 找到链接内的第一个图像标记，并从那里开始工作。)

<小时/>

至于你的第二个问题，正则表达式也是你的 friend :

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] );
    }
}

请参阅我上面提供的链接，了解该正则表达式的工作原理以及如何修改它以更好地满足您的需求。

(Ps.警告:我实际上没有测试上面的任何代码，因为我不想为此在游戏网站上创建试用帐户。我希望它是正确的，但可能存在错误或其中有拼写错误。)