用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 相关文章推荐
锋利的jQuery jQuery中的DOM操作
Mar 21 Javascript
一个简单的瀑布流效果(主体形式自写)
May 27 Javascript
Jquery动态改变图片IMG的src地址示例
Jun 25 Javascript
JavaScript立即执行函数的三种不同写法
Sep 05 Javascript
基于jquery的文字向上跑动类似跑马灯的效果
Sep 22 Javascript
JavaScript清空数组元素的两种方法简单比较
Jul 10 Javascript
Javascript连接Access数据库完整实例
Aug 03 Javascript
JavaScript遍历Json串浏览器输出的结果不统一问题
Nov 03 Javascript
Vue中$refs的用法详解
Jun 24 Javascript
ES6 Object方法扩展的应用实例分析
Jun 25 Javascript
详解Vuex下Store的模块化拆分实践
Jul 31 Javascript
js实现div色块拖动录制
Jan 16 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 采集书并合成txt格式的实现代码
2009/03/01 PHP
完美实现wordpress禁止文章修订和自动保存的方法
2014/11/03 PHP
服务器上配置PHP运行环境教程
2015/02/12 PHP
简单的js分页脚本
2009/05/21 Javascript
JavaScript中的Array对象使用说明
2011/01/17 Javascript
JQuery中操作Css样式的方法
2014/02/12 Javascript
js实现图片从左往右渐变切换效果的方法
2015/02/06 Javascript
详解JavaScript ES6中的Generator
2015/07/28 Javascript
JavaScript中日期的相关操作方法总结
2015/10/24 Javascript
jquery判断类型是不是number类型的实例代码
2016/10/07 Javascript
jquery实现点击页面回到顶部
2016/11/23 Javascript
Highcharts+NodeJS搭建数据可视化平台示例
2017/01/01 NodeJs
javascript滚轮事件基础实例讲解(37)
2017/02/14 Javascript
node文件上传功能简易实现代码
2017/06/16 Javascript
深入了解js原型模式
2019/05/30 Javascript
JSON stringify方法原理及实例解析
2020/10/23 Javascript
[45:40]Ti4 冒泡赛第二天NEWBEE vs NaVi 1
2014/07/15 DOTA
[57:41]Secret vs Serenity 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
使用70行Python代码实现一个递归下降解析器的教程
2015/04/17 Python
Python批量创建迅雷任务及创建多个文件
2016/02/13 Python
Python判断一个三位数是否为水仙花数的示例
2018/11/13 Python
Jacobi迭代算法的Python实现详解
2019/06/29 Python
马来西亚领先的在线礼品店:Giftr
2018/08/23 全球购物
美国社交购物市场:MassGenie
2019/02/18 全球购物
Myprotein亚太地区:欧洲第一在线运动营养品牌
2020/12/20 全球购物
remote接口和home接口主要作用
2013/05/15 面试题
影视艺术学院毕业生自荐信
2013/11/13 职场文书
淘宝客服专员岗位职责
2014/04/11 职场文书
买卖协议书范本
2014/04/21 职场文书
公司法定代表人授权委托书
2014/09/29 职场文书
幼儿园大班教师个人总结
2015/02/05 职场文书
安全教育日主题班会
2015/08/13 职场文书
goland 恢复已更改文件的操作
2021/04/28 Golang
如何在CSS中绘制曲线图形及展示动画
2021/05/24 HTML / CSS
使用Oracle命令进行数据库备份与还原
2021/12/06 Oracle
Redis实战之Lettuce的使用技巧详解
2022/12/24 Redis