用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 相关文章推荐
如何实现浏览器上的右键菜单
Jul 10 Javascript
基于jquery的监控数据是否发生改变
Apr 11 Javascript
JavaScript高级程序设计 学习笔记 js高级技巧
Sep 20 Javascript
javaScript复制功能调用实现方案
Dec 13 Javascript
Extjs优化(二)Form表单提交通用实现
Apr 15 Javascript
JQuery记住用户名和密码的具体实现
Apr 04 Javascript
jquery制作图片时钟特效
Mar 30 Javascript
详解JavaScript基本类型和引用类型
Dec 09 Javascript
jquery validation验证表单插件
Jan 07 Javascript
利用jquery正则表达式在页面验证url网址输入是否正确
Apr 04 jQuery
jquery实现简单实用的轮播器
May 23 jQuery
js封装成插件的步骤方法
Sep 11 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
Drupal7 form表单二次开发要点与实例
2014/03/02 PHP
PHP会话控制:Session与Cookie详解
2014/09/27 PHP
javascript Array对象基础知识小结
2010/11/16 Javascript
从零开始学习jQuery (三) 管理jQuery包装集
2011/02/23 Javascript
iframe父页面获取子页面参数的方法
2014/02/21 Javascript
nodejs npm包管理的配置方法及常用命令介绍
2014/06/05 NodeJs
用原生JS获取CLASS对象(很简单实用)
2014/10/15 Javascript
AngularJS + Node.js + MongoDB开发的基于高德地图位置的通讯录
2015/01/02 Javascript
js获取隐藏元素的宽高
2017/02/24 Javascript
Parcel.js + Vue 2.x 极速零配置打包体验教程
2017/12/24 Javascript
vue2.0 父组件给子组件传递数据的方法
2018/01/15 Javascript
详解react关于事件绑定this的四种方式
2018/03/09 Javascript
基于Webpack4和React hooks搭建项目的方法
2019/02/05 Javascript
vue+element模态框中新增模态框和删除功能
2019/06/11 Javascript
15分钟学会vue项目改造成SSR(小白教程)
2019/12/17 Javascript
简单的通用表达式求10乘阶示例
2014/03/03 Python
python实现批量下载新浪博客的方法
2015/06/15 Python
Windows下Python使用Pandas模块操作Excel文件的教程
2016/05/31 Python
Python实现TCP协议下的端口映射功能的脚本程序示例
2016/06/14 Python
Python 基础教程之str和repr的详解
2017/08/20 Python
Python中对象的引用与复制代码示例
2017/12/04 Python
python如何把嵌套列表转变成普通列表
2018/03/20 Python
pandas多级分组实现排序的方法
2018/04/20 Python
详解Python中的各种转义符\n\r\t
2019/07/10 Python
Python破解BiliBili滑块验证码的思路详解(完美避开人机识别)
2020/02/17 Python
解决jupyter notebook打不开无反应 浏览器未启动的问题
2020/04/10 Python
python 实现超级玛丽游戏
2020/11/25 Python
html5清空画布方法(三种)
2017/10/16 HTML / CSS
手工制作的意大利太阳镜和光学元件:Illesteva
2019/01/19 全球购物
什么是用户模式(User Mode)与内核模式(Kernel Mode) ?
2015/09/07 面试题
餐饮加盟计划书
2014/01/10 职场文书
财务总监管理岗位职责
2014/03/08 职场文书
应用心理学专业求职信
2014/08/04 职场文书
居委会工作总结2015
2015/05/18 职场文书
养成教育主题班会
2015/08/13 职场文书
Python tensorflow卷积神经Inception V3网络结构
2022/05/06 Python