Home > Others

Use the Greasemonkey script to add the Website member information to your local device.

Source: Internet
Author: User
Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞
Document directory
  • I. Introduction to script Functions
  • Ii. install and use scripts
  • Iii. Related downloads
  • Iv. Script Preview
  • 5. Notes

I. Introduction to script Functions

Under normal circumstances, it is not easy for you to quickly record the information of a member on the member search result page, you may right-click the member photo and write down the home address of the Member. If you want to add more members to the favorites page, repeat the above operations. The default search result page displays the following results:

After installing the Greasemonkey script that I wrote, the search result page changes a bit. The "Write to me" button changes to the "add to Favorites" check box. The result is as follows, note the differences between the red box logo and the preceding image:

Now, if you want to add the information about two beautiful women to the right of the first row, click the "add to Favorites" check box (if you don't want to add a favorite, click Cancel again ), in this way, the HTML of the selected member information is generated in the text box at the page flip of the footer, and is selected by default. You can right-click it and copy it, for example:

The member file is the record file of your favorite member. The result is as follows:

The code of the jiayuan.html template file is as follows. copy it and save it as an html Suffix in notepad.

Copy codeThe Code is as follows: <! 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> jiayuan member favorites </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>
<! -- Put the code you copied here, and save the preview to see the effect. -->
</Ul>
</Body>
</Html>

Ii. install and use scripts

To use this script function, you must install the Firefox browser, which is installed with the Greasemonkey plug-in, and then can find JiaYuan locally or on the network. user. js script file (the Greasemonkey script I wrote, and the code will be provided later), then pull the JS script locally to the browser window, or access the JS script (JiaYuan. user. js), the script installation interface will pop up, such:

After successfully installing the browser and plug-in, as well as the script, visit the members of The jiayuan network search table single page: http://search.jiayuan.com,
Submit a search request. If the displayed result page is not in the photo display mode, switch it over to make sure that the displayed search result page is the same as the page provided at the beginning of this article, in this case, you can see the "add to Favorites" check box. For more information, see "Script Function Introduction ".

Tip:To check whether the Greasemonkey plug-in is successfully installed, check whether the Greasemonkey option is available in the tool browser and whether the "monkey" icon is displayed on the right of the status bar, the "monkey" icon is not gray. If yes, the Greasemonkey plug-in is successfully installed, for example:

Iii. Related downloads

(1) Firefox (Firefox): (this version has integrated the Greasemonkey plug-in)

(2) Greasemonkey plug-in: http://releases.mozilla.org/pub/mozilla.org/addons/748/greasemonkey-0.8.20080609.0-fx.xpi (access is installed)

(3) Save jiayuan member information Script: http://snsapps.googlecode.com/svn/trunk/JiaYuan.user.js (access is installed)

Iv. Script Preview

Greasemonkey scripts are all written in JavaScript. To Write Excellent Greasemonkey applications, you must be familiar with JavaScript programming, understand JavaScript DOM programming, and analyze the HTML code structure. If you want to learn more about Greasemonkey, read Greasemonkey. Below I will publish the script code for this application as follows, hoping to serve as a reference for everyone.

Copy codeThe Code is as follows: // = UserScript =
// @ Name save member information
// @ Namespace http://www.ucoolweb.com
// @ Description collects your favorite member information on the search results page of century jiayuan jiaoyou network members, and saves them to HTML files for future reference.
// @ Include http://search.jiayuan.com/result.php?m=1 *
// =/UserScript =
/**
* Define a class
*/
Function clsJiaYuan ()
{
/**
* Define the getElementById shortcut
* @ Param {String} objId DOM ID
* @ Return {DOM}
*/
Var $ = function (objId)
{
Return document. getElementById (objId );
}
/**
* Define the getElementsByTagName shortcut
* @ Param {String} tagName
* @ Return {Array} DOM Array
*/
Var $ = function (tagName)
{
Return document. getElementsByTagName (tagName );
}
/*
If (window. HTMLElement)
{
HTMLElement. prototype. $ = $;
HTMLElement. prototype. $ =$;
}
*/
/**
* Search for DOM objects by style name
* @ Param {String} className The Name Of The style to be searched, that is, the class Attribute Value of the label.
* @ Param {String} tagName: used to filter tag names. An optional parameter to narrow the search 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 profile
*/
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;
// Process the HTML of advanced member information
If (infoList. length = 4)
{
Var about = infoList [2]. innerHTML;
}
Else
{
Var about = infoList [3]. innerHTML;
}
// Insert the check box HTML
PhotoBoxs [a]. getElementsByTagName ('lil') [3]. innerHTML = '<label> <input type = "checkbox" name = "love" value = "' + url + '|' + face + '|' + name + '|' + about + '"/> favorites </label> </span> ';
// Register the check box and click the processing 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 the HTML code of the selected member, which is called when the check box is clicked
This. outputHtml = function ()
{
Var loveHtml = '';
Var loveCheckBoxs = document. getElementsByName ('love ');
For (var I in loveCheckBoxs)
{
// Only the member information checked by the check box is output.
If (loveCheckBoxs [I]. checked)
{
Var infoList = loveCheckBoxs [I]. value. split ('| ');
Var liHtml = '<li> <a href = "' + infoList [0] + '" target = "_ blank"> </a> <strong>' + infoList [2] + '</strong> <span>' + infoList [3] + '</span> </ li> ';
LoveHtml + = liHtml;
}
}
$ ('Lovecode'). value = loveHtml;
$ ('Lovecode'). select (); // make the text domain code in the selected state for quick copying
}
// Program initialization public Method
This. init = function ()
{
CreateCheckBox ();
CreateTextBox ();
}
}
// Instantiate a class
Var jiaYuan = new clsJiaYuan ();
JiaYuan. init ();

5. Notes

1. When installing the Greasemonkey plug-in to the Firefox browser, select the Greasemonkey plug-in corresponding to the browser version. We recommend that you download the "enhanced portable version" Firefox browser. This version is generally integrated with the Greasemonkey plug-in. Download reference link: http://www.jb51.net/softs/21957.html

2. The script provided in this article may expire with the revision of jiayuan. Because the Greasemonkey script is operated based on the HTML of the target website, please leave a message if you find that the script is invalid, let me fix it. Of course, if you will write the script, you can also manually modify, modify the method can refer to here, modify the 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 on these browsers, if you find a problem with the script on another browser platform, you can leave a message to tell me.

4. Make sure that the Greasemonkey plug-in is activated, that is, the "monkey" icon in the lower right corner of the browser is not gray. Otherwise, even if you install the plug-in, you will not get the expected effect.
Author: WebFlash
Source: http://webflash.cnblogs.com

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

Related Keywords:
wordpress the field ldap add member to group mongodb add member to replica set add device to google play add device to google play add device to norton account add https to website

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.

What's Trending
Top 10 Tags
datastax versions naming convention zookeeper client class definition md5 microsoft sql server 2005 data structures exception handling error handling
Top 10 Keywords
microsoft download center down wordpress address url site address url wordpress address url windows installer 4 0 download 302 not found web address url definition site address url wordpress db2 integer mac os installation step by step pdf abbreviation for return

A Free Trial That Lets You Build Big!

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

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

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

    Open a Ticket

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

    Learn More