用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 相关文章推荐
html下载本地
Jun 19 Javascript
JS 字符串连接[性能比较]
May 10 Javascript
浅析offsetLeft,Left,clientLeft之间的区别
Nov 30 Javascript
asp.net+js实现金额格式化
Feb 27 Javascript
JavaScript截取指定长度字符串点击可以展开全部代码
Dec 04 Javascript
基于JavaScript实现鼠标悬浮弹出跟随鼠标移动的带箭头的信息层
Jan 18 Javascript
JS脚本实现动态给标签控件添加事件的方法
Jun 02 Javascript
JavaScript将base64图片转换成formData并通过AJAX提交的实现方法
Oct 24 Javascript
详解JavaScript中js对象与JSON格式字符串的相互转换
Feb 14 Javascript
JS返回顶部实例代码
Aug 09 Javascript
vue自定义switch开关组件,实现样式可自行更改
Nov 01 Javascript
Element-ui树形控件el-tree自定义增删改和局部刷新及懒加载操作
Aug 31 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数组函数序列之array_values() 获取数组元素值的函数与方法
2011/10/30 PHP
PHP中单引号与双引号的区别分析
2014/08/19 PHP
PHP实现GIF图片验证码
2015/11/04 PHP
关于PHP中Session文件过多的问题及session文件保存位置
2016/03/17 PHP
laravel 模型查询按照whereIn排序的示例
2019/10/16 PHP
JavaScript 参考教程
2006/12/29 Javascript
修改发贴的编辑功能
2007/03/07 Javascript
慎用 somefunction.prototype 分析
2009/06/02 Javascript
JSON序列化与解析原生JS方法且IE6和chrome测试通过
2013/09/05 Javascript
3种不同方式的焦点图轮播特效分享
2013/10/30 Javascript
js锁屏解屏通过对$.ajax进行封装实现
2014/07/31 Javascript
使用ngView配合AngularJS应用实现动画效果的方法
2015/06/19 Javascript
JS实现复制内容到剪贴板功能兼容所有浏览器(推荐)
2016/06/17 Javascript
利用Node.js+Koa框架实现前后端交互的方法
2017/02/27 Javascript
详解Vue-cli3.X使用px2rem遇到的问题
2019/08/09 Javascript
vue 实现强制类型转换 数字类型转为字符串
2019/11/07 Javascript
浅谈如何优雅处理JavaScript异步错误
2019/11/12 Javascript
解决vue项目打包上服务器显示404错误,本地没出错的问题
2020/11/03 Javascript
[01:59]翻天覆地,因你而变,7.20版本地图更新速览
2018/11/24 DOTA
Python实现的使用telnet登陆聊天室实例
2015/06/17 Python
python获取外网ip地址的方法总结
2015/07/02 Python
简单谈谈python中的lambda表达式
2018/01/19 Python
利用python 更新ssh 远程代码 操作远程服务器的实现代码
2018/02/08 Python
Python中__slots__属性介绍与基本使用方法
2018/09/05 Python
Python如何使用turtle库绘制图形
2020/02/26 Python
python 实现在无序数组中找到中位数方法
2020/03/03 Python
英国女性时尚精品店:THE DRESSING ROOM
2018/05/23 全球购物
贝尔帐篷精品店:Bell Tent Boutique
2019/06/12 全球购物
联想英国官网:Lenovo英国
2019/07/17 全球购物
JPA面试常见问题
2016/11/14 面试题
夫妻双方自愿离婚协议书
2014/10/24 职场文书
教师听课评语大全
2014/12/31 职场文书
《家庭教育》读后感3篇
2019/12/18 职场文书
python 爬取豆瓣网页的示例
2021/04/13 Python
Linux系统下MySQL配置主从分离的步骤
2022/03/21 MySQL
spring IOC容器的Bean管理XML自动装配过程
2022/05/30 Java/Android