Use Greasemonkey script to collect website member information locally_javascript skills

1. Introduction to script functions

Under normal circumstances, if you like a member through photos on the member search results page (the so-called member with good eyesight), it is not easy to quickly record the member’s information. Right-click on the photo, and then write down the member's homepage address. If there are more promising members who want to save a page, you have to repeat the above operation. The default search results page displays as shown below:

After installing the Greasemonkey script I wrote, the search results page will change a little. The "Write to me" button will become a "Favorite" checkbox. The effect is as shown below. Pay attention to the changes in the red box logo and the previous picture. Comparison:

Now suppose you want to collect the information of the two beauties on the right side of the first row, you click the "Collect" checkbox (if you don't want to collect it, just click again to deselect it), so that in the text box at the footer page turning position The HTML of the member information you selected will be generated, and it will be selected by default. You can right-click to copy it, as shown below:

Finally, paste the copied HTML code into the specified position of a predefined style html page (for example, paste the copied LI tag code between the UL tags of the jiayuan.html file, and then new collections will be added to the back. , the last jiayuan.html file is the record file of your favorite members), the result is as follows:

The code for the jiayuan.html template file is as follows. Copy it and save it as a file with the html suffix using Notepad.

Copy code The code is as follows:

.org/1999/xhtml">


< title>Jiayuan Member Collection

< /body>

2. Installation and usage script

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

After successfully installing the browser, plug-in, and script, visit Jiayuan.com member search form page: http://search.jiayuan.com,
Submit a search Request, on the result page that comes out, if it is not in photo display mode, switch it over and make sure that the search results page you see is the same as the interface provided at the beginning of this article. If nothing goes wrong, you can see the "Collection" check box. Frame, please refer to "Introduction to Script Functions" for the next operation.

Warm reminder: If you want to know whether the Greasemonkey plug-in is successfully installed, please check whether the browser [Tools] has the [Greasemonkey] option, and whether there is a "little monkey" icon on the right side of the browsing status bar, and this The "little monkey" icon is not gray. If both are there, it means the Greasemonkey plug-in is successfully installed, as shown below:

3. Related downloads

(1)Firefox browser: (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 (Visit and install)

(3) Save Jiayuan member information script: http://snsapps.googlecode.com/svn/trunk/JiaYuan.user.js(Visit and install)

4. Script Preview

Greasemonkey scripts are all written in JavaScript language. To write an excellent Greasemonkey application, you must be familiar with JavaScript programming, understand JavaScript DOM programming, and be able to analyze HTML code structure. If you want to know more about Greasemonkey, please read "Greasemonkey in a Simple Language" . I will publish the application script code below, hoping that it will be helpful to everyone.

Copy code The code is as follows:

// ==UserScript==
// @name Save member information
// @namespace http://www.ucoolweb.com
// @description Collect Century Jiayuan Dating Select your favorite member information from the member search results page and save them as local HTML files for easy reference in the future.
// @include http://search.jiayuan.com/result.php*m=1*
// ==/UserScript==
/**
* Define a class
*/
function clsJiaYuan()
{
/**
* Define getElementById shortcut
* @param {String} objId DOM ID
* @return {DOM}
*/
var $ = function(objId)
{
return document.getElementById(objId);
}
/**
* Define getElementsByTagName shortcut
* @param {String} tagName tag name
* @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 style name to be found, that is, the class attribute value of the tag
* @param {String} tagName Filter tag name, optional parameter, Used to narrow the search scope
* @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 checkboxes 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 checkbox HTML
photoBoxs[a].getElementsByTagName('li')[ 3].innerHTML = 'Collection';
//Register check box click handler function
photoBoxs[a].getElementsByTagName('input')[0].addEventListener('click', jiaYuan.outputHtml, true );
}
}
//Create HTML code output text area
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 select member HTML Code, called when a checkbox is clicked
this.outputHtml = function()
{
var loveHtml = '';
var loveCheckBoxs = document.getElementsByName('love');
for (var i in loveCheckBoxs)
{
//Only output member information with checked check boxes
if (loveCheckBoxs[i].checked)
{
var infoList = loveCheckBoxs [i].value.split('|');
var liHtml = '

' infoList[2] '' infoList[3] '

';
loveHtml = liHtml;
}
}
$('loveCode').value = loveHtml;
$('loveCode').select(); //Let the text field The code is selected for quick copying
}
//Program initialization public method
this.init = function()
{
createCheckBox();
createTextBox();
}
}
//Instantiate a class
var jiaYuan = new clsJiaYuan();
jiaYuan.init();

5. Things to note

1. When installing the Greasemonkey plug-in to the Firefox browser, please choose to install the Greasemonkey plug-in corresponding to the browser version. It is recommended to download the "enhanced portable version" of the Firefox browser. This version generally integrates the Greasemonkey plug-in. Download reference link: http://www.jb51.net/softs/21957.html

2. The script provided in this article may become invalid with the revision of Jiayuan.com, because the Greasemonkey script is based on the HTML operation of the target website. If you find that the script is invalid, please leave me a message in time and let me correct it. Of course, if you can also write scripts, you can also modify it yourself. For modification methods, you can refer here to modify user scripts: 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 If there are problems with the script in other browser platforms, you can also leave a message to tell me.

4. You must ensure that the Greasemonkey plug-in is activated, that is, the "little monkey" icon in the lower right corner of the browser is not gray, otherwise you will not get the expected results even if you install the plug-in.
Author: WebFlash
Source: http://webflash.cnblogs.com