Use Greasemonkey script to collect website member information to local _javascript tips

Source: Internet
Author: User
Tags tagname first row

Introduction of script function

Under normal circumstances, if you're looking at a member on the member Search results page and you're looking at a membership (a so-called eye-edge member), it's not easy to get a quick record of this member's information, you may right-click on the member's photo and write down the member's home address. A page if there are more bullish members want to collect, you have to repeat the above operation. The default search results page displays the following image:

After installing my Greasemonkey script, the search results page changes a little, and the "Write to Me" button becomes the "Favorites" check box, and the effect is as follows: Notice the Red box logo in contrast to the previous picture.

Now let's say you want to collect the first row of two beauty messages, you click the "Favorites" checkbox (do not want to collect the click again to cancel the selection), so the page footer in the text box will generate your selected member information of the HTML, and the default is selected, you right button copy it, the following figure:

Finally, paste the copied HTML code into a predefined HTML page at the specified location (such as pasting the copied Li tag code into the jiayuan.html file's ul tag, after the new collection has been to the back heap on the line, and finally this jiayuan.html file is your collection of members of the record file), knot Fruit the following figure:

jiayuan.html template file code as follows, copy it and save it as an HTML suffix file with Notepad.

Copy Code code as follows:

<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<meta http-equiv= "Content-type" content= "text/html; CHARSET=GBK "/>
<title> Jia Yuan Member collection </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>

<body>
<ul>
<!--put your copied code here, and then save the preview to see the effect-->
</ul>
</body>

Ii. installation and use of scripts

To use this script feature, you must install Firefox (firefox) browser , and this browser is loaded with the Greasemonkey plugin , Then you can find the JiaYuan.user.js script file either locally or on the network (that is, I wrote the Greasemonkey script, I will provide the code later), and then pull this JS script locally to the browser window, or access the JS script over the network address ( JiaYuan.user.js), the script installation interface will pop up, as shown in the following figure:

Successful installation of browsers and Plug-ins, as well as scripts, access to the Home Network Member search Form page:http://search.jiayuan.com,
Submit a search request, in the resulting page, if not the photo display mode, switch it over, make sure that you see the search results page and the interface provided at the beginning of this article, you can see the "collection" check box is not unexpected, the next action Reference "script feature introduction."

warm tip: want to know whether the Greasemonkey plug-in successfully installed, please see if the browser tool has the "greasemonkey" option, and browse the status bar to the right side of the "Little Monkey" icon, and the "Little monkey" icon is not gray, If all of them indicate that the Greasemonkey plugin was installed successfully, as shown in the following figure:

Third, related downloads

(1) Firefox (Firefox) Browser: (This version has integrated Greasemonkey plugin)

(2) Greasemonkey plugin:http://releases.mozilla.org/pub/mozilla.org/addons/748/ GREASEMONKEY-0.8.20080609.0-FX.XPI(access is installed)

(3) Save Jia Yuan member information script:http://snsapps.googlecode.com/svn/trunk/JiaYuan.user.js(Access is installed)

Four, Script preview

Greasemonkey scripts are written in JavaScript, you need to be familiar with JavaScript programming, understanding JavaScript DOM programming, and parsing HTML code structures to write good greasemonkey applications. If you would like to know more about Greasemonkey, please read "Greasemonkey". The following I put the application script code published below, I hope that we can play a role.

Copy Code code as follows:

==userscript==
@name Save Membership information
@namespace http://www.ucoolweb.com
@description collection century Jia Yuan Dating network Member search results page you like the membership information, and save them to the cost of HTML files, to facilitate future inspection.
@include http://search.jiayuan.com/result.php*m=1*
==/userscript==
/**
* Define a class
*/
function Clsjiayuan ()
{
/**
* Define getElementById Shortcuts
* @param {String} objid DOM ID
* @return {DOM}
*/
var $ = function (ObjID)
{
return document.getElementById (ObjID);
}
/**
* Define getElementsByTagName shortcuts
* @param {String} tagName sign
* @return {array} DOM array
*/
var $$ = function (tagName)
{
Return document.getElementsByTagName (TagName);
}
/*
if (window. HtmlElement)
{
htmlelement.prototype.$=$;
htmlelement.prototype.$$=$$;
}
*/
/**
* Find DOM objects by style name
* @param {String} className the name of the style to find, that is, the label's Class property value
* @param {String} tagName filter label name, optional parameters for narrowing the lookup range
* @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;
}
/**
* Create a check box under each member's Avatar
*/
var createcheckbox = function ()
{
var photoboxs = getelementsbyclassname (' Searh_photobox ', ' div ');
For (Var a in photoboxs)
{
var infolist = photoboxs[a].getelementsbytagname (' a ');
Extract member Information
var url = infolist[0].href;
var face = infolist[0].getelementsbytagname (' img ') [0].SRC;
var name = Infolist[0].getelementsbytagname (' img ') [0].alt;
Processing Advanced Member Information HTML
if (infolist.length = 4)
{
var about = infolist[2].innerhtml;
}
Else
{
var about = infolist[3].innerhtml;
}
Insert check box HTML
Photoboxs[a].getelementsbytagname (' li ') [3].innerhtml = ' <label><input type= checkbox ' name= ' Love ' value= ' + URL + ' | ' + Face + ' | ' + name + ' | ' + about + ' "/> Collection </label></span> ';
Register check box click the handler function
Photoboxs[a].getelementsbytagname (' input ') [0].addeventlistener (' Click ', jiayuan.outputhtml, true);
}
}
Create an HTML code output text field
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 ';
}
Output or update Select the member HTML code, which is called when the check box is clicked
this.outputhtml = function ()
{
var lovehtml = ';
var lovecheckboxs = Document.getelementsbyname (' love ');
for (var i in Lovecheckboxs)
{
Output only check box tick member information
if (lovecheckboxs[i].checked)
{
var infolist = lovecheckboxs[i].value.split (' | ');
var lihtml = ' <li><a href= ' + infolist[0] + ' "target=" _blank "></a& Gt;<strong> ' + infolist[2] + ' </strong><span> ' + infolist[3] + ' </span></li> ';
lovehtml + = lihtml;
}
}
$ (' Lovecode '). Value = lovehtml;
$ (' Lovecode '). Select (); Make text field code selected for quick copy
}
Open method of program initialization
This.init = function ()
{
Createcheckbox ();
CreateTextbox ();
}
}
Instantiation of a class
var Jiayuan = new Clsjiayuan ();
Jiayuan.init ();

V. Matters of attention

1, in the installation of Greasemonkey Plug-ins to Firefox (Firefox) browser, please choose to install the browser version of the corresponding Greasemonkey plug-ins. It is recommended to download the "enhanced portable" Firefox browser, which generally integrates Greasemonkey plug-ins. Download Reference Link: http://www.jb51.net/softs/21957.html

2, this article provides the script may be with the good edge net of the revision and invalidation, because the Greasemonkey script work is based on the target website HTML operation, if you discover the script invalidation please give me the message in time, let me revise. Of course, if you also write a script, you can also modify your own, modify the method can refer to here, modify user script: Http://www.firefox.net.cn/dig/helloworld/editing.html

3, it is understood that many browsers now support Greasemonkey, such as Chrome, Opera, and even IE, this script has not been tested in these browsers, if you find that the script in other browser platform problems, you can also leave a message to tell me.

4, must ensure that the Greasemonkey plug-ins in the active state, that is, the bottom right corner of the browser "little monkey" icon is not gray, otherwise you even installed Plug-ins, will not be expected effect.
Author: Webflash
Source: http://webflash.cnblogs.com

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.