通过Greasemonkey实现网页图片自动点击

　　昨天受一个朋友所托，实现了一个在特定网页自动点击某超链接图片实现网页跳转功能的JavaScript脚本。

　　工具就是Firefox的Greasemonkey扩展插件。代码如下：

 // ==UserScript==
 // @name          脚本名字
 // @namespace     http://weibo.com/p/1005052581834920
 // @version       20150303
 // @description   自动点击特定超链接实现网页跳转
 // @include       http://shop.snh48.com/flow.php?step=cart
 // @require       http://shop.snh48.com/js/common.js
 // @run-at        document-end
 // ==/UserScript==

 var imgArray = document.getElementsByTagName('img');
 for (var i = 0; i < imgArray.length; i++) {
     if (imgArray[i].src == 'http://shop.snh48.com/themes/snh48/images/checkout.gif') {
         imgArray[i].click();
     }
 }

　　其中1~9行用来向Greasemonkey描述这个脚本自身的信息：

1. @name是用户脚本的名字，它将会在安装脚本时显示在安装对话框，之后会显示在“管理用户脚本”对话框中，尽量用好识别的名字。
2. @namespace是一个URL，Greasemonkey用它来区分名称相同但是作者不同的脚本。建议用个人网页地址，比如微博主页。
3. @version记录脚本的版本号，可以用1.0、1.1、2.0这种常用版本号或脚本编写日期等。
4. @description是脚本功能的描述，它将会在安装脚本时显示在安装对话框之后会显示在“管理用户脚本”对话框中。尽量言简意赅。
5. @include是一个URL，Greasemonkey通过它知道要在哪些网站上执行该脚本。可以用多行指定多个网址，也可以用通配符*来代替域名或路径中的部分字符，这样可以将子网页都包括进来。
6. @exclude也是一个URL，Greasemonkey通过它知道要在哪些网站上必不执行该脚本，它的权限比@include高。
7. @require是其他脚本名字，它告诉Greasemonkey该脚本要想工作还需依赖哪些js脚本，可以用多行指定多个脚本。

　　下面代码主体部分了，在上面这个例子中，首先通过document.getElementsByTagName函数获得该网页的所有img，然后用for循环扫描一遍，找到目标图片后用click函数跳转就行了。

　　还有两点需要一提的：

1. 判断图片的src值时需要在网页源代码中的src值前加上父目录，在上面这个例子中，themes/snh48/images/checkout.gif是目标图片在网页中的src值，但做判断时还需在前面加上父目录http://shop.snh48.com/。
2. 如果本身网页中有给目标图片加上ID标签，那么直接用document.getElementById函数就可以定位到目标图片，不需用for循环逐个判断了，这也告诉我们编写前端网页时多用ID标签，毕竟方便。