用Greasemonkey 脚本收藏网站会员信息到本地


Posted in Javascript onOctober 26, 2009

一、脚本功能介绍

正常情况下,如果你在会员搜索结果页通过相片看好某个会员(所谓眼缘好的会员),想快速记录下这个会员的信息并不是一件容易的事情,你也许会在会员相片上单击右键,然后把这个会员的主页地址先记下来,一个页面如果有较多看好的会员想收藏的话,你还得重复上面的操作。默认搜索结果页显示效果如下图:

用Greasemonkey 脚本收藏网站会员信息到本地

安装我写的Greasemonkey脚本后,搜索结果页就会发生一点改变,“给我写信”按钮会变成“收藏”复选框,效果如下图,注意红框标识与前面图片的变化对比:

用Greasemonkey 脚本收藏网站会员信息到本地

现在假设你想收藏第一排右边两位美女信息的话,你就点击“收藏”复选框(不想收藏就再次点击取消选择即可),这样在页脚翻页位置的文本框里就会生成你选中会员信息的HTML,并且默认处于选中状态,你右键复制它,如下图:

用Greasemonkey 脚本收藏网站会员信息到本地

最后把复制的HTML代码粘贴到一个预定义样式的html页面的指定位置(比如把复制的LI标签代码粘贴到jiayuan.html文件的UL标签之间,以后新的收藏一直往后面堆就行了,最后这个jiayuan.html文件就是你收藏会员的记录文件),结果如下图:

用Greasemonkey 脚本收藏网站会员信息到本地

jiayuan.html模板文件代码如下,把它复制后用记事本另存为html后缀的文件即可。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gbk" /> 
<title>佳缘会员收藏</title> 
<style type="text/css"> 
* {margin:0; padding:0} 
li {list-style:none} 
body {font-size:12px; line-height:1.5em; padding:20px} li {width:130px; height:200px; float:left; text-align:center} 
li img {border:3px solid #F4F6F9} 
li strong {display:block; color:#0043B7} 
</style> 
</head> 
<body> 
<ul> 
<!--把你复制的代码放到这里,然后保存预览即可看到效果--> 
</ul> 
</body> 
</html>

二、安装和使用脚本

要使用本脚本功能,你必须安装Firefox(火狐)浏览器,而且这个浏览器装上了Greasemonkey插件,然后在本地或网络能找到JiaYuan.user.js脚本文件(就是我写的Greasemonkey脚本,后面会提供代码),然后在本地拉这个JS脚本到浏览器窗口,或者通过网络地址访问这个JS脚本(JiaYuan.user.js),就会弹出脚本安装界面,如下图:
用Greasemonkey 脚本收藏网站会员信息到本地

成功安装浏览器和插件,以及脚本后,访问佳缘网会员搜索表单页:http://search.jiayuan.com,
提交一次搜索请求,在出来的结果页,如果不是照片显示模式,把它切换过来,确保看到的搜索结果页与本文一开始提供的界面那样,此时不出意外的话就可以看到“收藏”复选框了,接下来的操作参考“脚本功能介绍”。

温馨提示:想知道Greasemonkey插件是否安装成功,请查看浏览器【工具】是否有【Greasemonkey】选项,以及浏览状态栏右侧是否有“小猴子”图标,而且这个“小猴子”图标不是灰色的,如果都有则表明Greasemonkey插件成功安装,如下图:

用Greasemonkey 脚本收藏网站会员信息到本地

三、相关下载

(1)Firefox(火狐)浏览器:(本版本已集成Greasemonkey插件)

(2)Greasemonkey插件:http://releases.mozilla.org/pub/mozilla.org/addons/748/greasemonkey-0.8.20080609.0-fx.xpi(访问即安装)

(3)保存佳缘会员信息脚本:http://snsapps.googlecode.com/svn/trunk/JiaYuan.user.js(访问即安装)

四、脚本预览

Greasemonkey脚本都是用JavaScript语言写的,要想写出优秀的Greasemonkey应用,你必需熟悉JavaScript编程,了解JavaScript DOM编程,以及会分析HTML代码结构。如果你想更多地了解Greasemonkey,请阅读《深入浅出 Greasemonkey》。下面本人把本应用脚本代码公布如下,希望对大家能起到抛砖引玉的作用。

// ==UserScript== 
// @name 保存会员信息 
// @namespace http://www.ucoolweb.com 
// @description 收集世纪佳缘交友网会员搜索结果页你喜欢的会员信息,并把它们保存成本地HTML文件,以方便日后查阅。 
// @include http://search.jiayuan.com/result.php*m=1* 
// ==/UserScript== 
/** 
* 定义一个类 
*/ 
function clsJiaYuan() 
{ 
/** 
* 定义getElementById快捷方式 
* @param {String} objId DOM ID 
* @return {DOM} 
*/ 
var $ = function(objId) 
{ 
return document.getElementById(objId); 
} 
/** 
* 定义getElementsByTagName快捷方式 
* @param {String} tagName 标签名 
* @return {Array} DOM Array 
*/ 
var $$ = function(tagName) 
{ 
return document.getElementsByTagName(tagName); 
} 
/* 
if (window.HTMLElement) 
{ 
HTMLElement.prototype.$=$; 
HTMLElement.prototype.$$=$$; 
} 
*/ 
/** 
* 按样式名查找DOM对象 
* @param {String} className 要查找的样式名,即标签的class属性值 
* @param {String} tagName 筛选标签名,可选参数,用于缩小查找范围 
* @return {Array} DOM Array 
*/ 
var getElementsByClassName = function(className, tagName) 
{ 
var selector = tagName || '*'; 
var allDom = $$(selector); 
var domList = []; 
for (var i in allDom) 
{ 
if (allDom[i].className == className) 
{ 
domList[domList.length] = allDom[i]; 
} 
} 
return domList; 
} 
/** 
* 创建每个会员头像下的复选框 
*/ 
var createCheckBox = function() 
{ 
var photoBoxs = getElementsByClassName('searh_photobox', 'div'); 
for (var a in photoBoxs) 
{ 
var infoList = photoBoxs[a].getElementsByTagName('a'); 
//提取会员信息 
var url = infoList[0].href; 
var face = infoList[0].getElementsByTagName('img')[0].src; 
var name = infoList[0].getElementsByTagName('img')[0].alt; 
//处理高级会员信息HTML 
if (infoList.length == 4) 
{ 
var about = infoList[2].innerHTML; 
} 
else 
{ 
var about = infoList[3].innerHTML; 
} 
//插入复选框HTML 
photoBoxs[a].getElementsByTagName('li')[3].innerHTML = '<label><input type="checkbox" name="love" value="' + url + '|' + face + '|' + name + '|' + about + '" />收藏</label>< /span>'; 
//注册复选框单击处理函数 
photoBoxs[a].getElementsByTagName('input')[0].addEventListener('click', jiaYuan.outputHtml, true); 
} 
} 
//创建HTML代码输出文本域 
var createTextBox = function() 
{ 
var loveCodeDom = document.createElement('textarea'); 
loveCodeDom.id = 'loveCode'; 
loveCodeDom.rows = 5; 
var pageBox = getElementsByClassName('pageclass', 'div')[1]; 
pageBox.appendChild(loveCodeDom); 
$('loveCode').style.width = '640px'; 
$('loveCode').style.margin = '10px'; 
} 
//输出或更新选择会员HTML代码,在单击复选框时调用 
this.outputHtml = function() 
{ 
var loveHtml = ''; 
var loveCheckBoxs = document.getElementsByName('love'); 
for (var i in loveCheckBoxs) 
{ 
//只输出复选框打勾的会员信息 
if (loveCheckBoxs[i].checked) 
{ 
var infoList = loveCheckBoxs[i].value.split('|'); 
var liHtml = '<li><a href="' + infoList[0] + '" target="_blank"><img src="' + infoList[1] + '" /></a><strong>' + infoList[2] + '</strong><span>' + infoList[3] + '</span></li>'; 
loveHtml += liHtml; 
} 
} 
$('loveCode').value = loveHtml; 
$('loveCode').select(); //让文本域代码处于选中状态,方便快速复制 
} 
//程序初始化公开方法 
this.init = function() 
{ 
createCheckBox(); 
createTextBox(); 
} 
} 
//实例化一个类 
var jiaYuan = new clsJiaYuan(); 
jiaYuan.init();

五、注意事项

1、在安装Greasemonkey插件到Firefox(火狐)浏览器的时候,请选择安装与浏览器版本对应的Greasemonkey插件。建议下载“增强便携版” Firefox浏览器,这种版本一般集成Greasemonkey插件。下载参考链接:https://3water.com/softs/21957.html

2、本文提供脚本可能会随着佳缘网的改版而失效,因为Greasemonkey脚本的工作是基于目标网站HTML操作的,如果你发现脚本失效请及时给我留言,让我修正。当然,如果你也会编写脚本的话,你还可以自己动手修改,修改方法可以参考这里,修改用户脚本:http://www.firefox.net.cn/dig/helloworld/editing.html

3、据了解现在很多浏览器都支持Greasemonkey,比如Chrome、Opera,甚至IE,本脚本并没有在这些浏览器上测试过,如果你发现脚本在其它浏览器平台下有问题,也可以留言告诉我。

4、必须保证Greasemonkey插件处于激活状态,即浏览器右下角的“小猴子”图标不是灰色的,不然你即使安装了插件,也会得不到预期的效果。
作者:WebFlash
出处:http://webflash.cnblogs.com

Javascript 相关文章推荐
extjs 的权限问题 要求控制的对象是 菜单,按钮,URL
Mar 09 Javascript
解决JS浮点数运算出现Bug的方法
Mar 12 Javascript
全面兼容的javascript时间格式化函数(比较实用)
May 14 Javascript
Javascript 中创建自定义对象的方法汇总
Dec 04 Javascript
JavaScript DOM基础
Apr 13 Javascript
jQuery实现的多级下拉菜单效果代码
Aug 24 Javascript
angularjs在ng-repeat中使用ng-model遇到的问题
Jan 21 Javascript
javascript中的 object 和 function小结
Aug 14 Javascript
JS实现的计数排序与基数排序算法示例
Dec 04 Javascript
vue-cli脚手架引入图片的几种方法总结
Mar 13 Javascript
vue实现自定义多选与单选的答题功能
Jul 05 Javascript
js时间戳转yyyy-MM-dd HH-mm-ss工具类详解
Apr 30 Javascript
解决jquery .ajax 在IE下卡死问题的解决方法
Oct 26 #Javascript
解决表单中第一个非隐藏的元素获得焦点的一个方案
Oct 26 #Javascript
innerhtml用法 innertext用法 以及innerHTML与innertext的区别
Oct 26 #Javascript
几个javascript操作word的参考代码
Oct 26 #Javascript
javascript 操作Word和Excel的实现代码
Oct 26 #Javascript
JavaScript 对话框和状态栏使用说明
Oct 25 #Javascript
5款Javascript颜色选择器
Oct 25 #Javascript
You might like
php上传apk后自动提取apk包信息的使用(示例下载)
2013/04/26 PHP
php为字符串前后添加指定数量字符的方法
2015/05/04 PHP
创建一个复制UBB软件信息的链接或按钮的js代码
2008/01/06 Javascript
jQuery MD5加密实现代码
2010/03/15 Javascript
通过jQuery源码学习javascript(三)
2012/12/27 Javascript
javascript和HTML5利用canvas构建猜牌游戏实现算法
2013/07/17 Javascript
jQuery 2.0.3 源码分析之core(一)整体架构
2014/05/27 Javascript
JavaScript中的console.group()函数详细介绍
2014/12/29 Javascript
使用Sticker.js实现贴纸效果
2015/01/28 Javascript
angularJS结合canvas画图例子
2015/02/09 Javascript
原生js和jquery实现图片轮播特效
2015/04/23 Javascript
使用纯JS代码判断字符串中有多少汉字的实现方法(超简单实用)
2016/11/12 Javascript
vue.js组件之间传递数据的方法
2017/07/10 Javascript
React学习之事件绑定的几种方法对比
2017/09/24 Javascript
Bootstrap modal只加载一次数据的解决办法(推荐)
2017/11/24 Javascript
利用adb shell和node.js实现抖音自动抢红包功能(推荐)
2018/02/22 Javascript
javaScript产生随机数的用法小结
2018/04/21 Javascript
JQuery特殊效果和链式调用操作示例
2019/05/13 jQuery
javascript面向对象创建对象的方式小结
2019/07/29 Javascript
python使用Flask框架获取用户IP地址的方法
2015/03/21 Python
python使用fileinput模块实现逐行读取文件的方法
2015/04/29 Python
python多进程(加入进程池)操作常见案例
2019/10/21 Python
从训练好的tensorflow模型中打印训练变量实例
2020/01/20 Python
Pycharm创建文件时自动生成文件头注释(自定义设置作者日期)
2020/11/24 Python
python3定位并识别图片验证码实现自动登录功能
2021/01/29 Python
Luxplus荷兰:以会员价购买美容产品等,独家优惠
2019/08/30 全球购物
PHP面试题及答案一
2012/06/18 面试题
历史学专业大学生找工作的自我评价
2013/10/16 职场文书
护士个人简历自荐信
2013/10/18 职场文书
社团活动策划书范文
2014/01/09 职场文书
会计毕业自我鉴定
2014/02/05 职场文书
生活小常识广播稿
2014/09/16 职场文书
事业单位人员的自我评价范文
2014/09/21 职场文书
小学生安全教育广播稿
2014/10/20 职场文书
五一劳动节慰问信
2015/02/14 职场文书
党员干部学习十八届五中全会精神心得体会
2016/01/05 职场文书