Greasemonkey スクリプトを使用して Web サイトのメンバー情報をローカルで収集する_javascript スキル

1. スクリプト関数の概要

通常、メンバー検索結果ページの写真でメンバーを気に入った場合(いわゆる視力の良いメンバー)、写真を右クリックしてメンバーの情報をすぐに記録するのは簡単ではありません。さらに有望なメンバーがページを保存したい場合は、上記の操作を繰り返す必要があります。デフォルトの検索結果ページは次のように表示されます:

私が作成した Greasemonkey スクリプトをインストールすると、「Write to me」ボタンが「Favorite」チェックボックスに変わります。以下のような変化に注目してください。ボックスのロゴと前の写真の比較:

ここで、最初の行の右側にある 2 人の美女の情報を収集したいとします。「収集」チェックボックスをクリックします (収集したくない場合は、もう一度クリックして選択を解除します)。フッターページのめくり位置のテキストボックスに、選択したメンバー情報のHTMLが生成されます。以下に示すように、デフォルトで右クリックしてコピーできます。

最後に、コピーした HTML コードを、定義済みスタイルの HTML ページの指定された位置に貼り付けます (たとえば、コピーした LI タグ コードを jiayuan.html ファイルの UL タグの間に貼り付けると、新しいコレクションが戻る。最後の jiayuan.html ファイルはお気に入りのメンバーの記録ファイルです)、結果は次のようになります:

jiayuan.html テンプレート ファイルのコードは次のとおりです。これをコピーし、メモ帳を使用して html サフィックスが付いたファイルとして保存します。

コードをコピー コードは次のとおりです:

.org/1999/xhtml"> ;head>


* {margin:0; padding:0}
li {list-style:none}
body {font-size:12px; 1.5em; パディング:20px}

li {幅:130px; 高さ:200px; text-align:center}
li img {border:3px ソリッド #F4F6F9}強い {display:block; color:#0043B7}




-- ここにコピーしたコードを配置し、プレビューを保存して効果を確認します。

2. インストールと使用スクリプト

このスクリプト機能を使用するには、Firefox ブラウザ をインストールする必要があります。このブラウザには Greasemonkey プラグイン が含まれています。次に、JiaYuan.user.js スクリプト ファイルをローカルまたはネットワーク上で見つけて (これは私が作成した Greasemonkey スクリプトです。コードは後で提供します)、この JS スクリプトをローカルでブラウザ ウィンドウにプルするか、この JS にアクセスします。ネットワーク アドレス スクリプト (JiaYuan.user.js) を使用すると、以下に示すように、スクリプト インストール インターフェイスがポップアップ表示されます:

ブラウザ、プラグイン、スクリプトが正常にインストールされたら、Jiayuan.com メンバー検索フォーム ページにアクセスしてください: http://search.jiayuan.com、
表示される結果ページで検索リクエストを送信します (写真表示モードではない場合)。表示される検索結果ページがこの記事の冒頭で提供されているインターフェイスと同じであることを確認します。何も問題がなければ、[コレクション] チェック ボックスが表示されます。次の操作については、「スクリプト関数の概要」を参照してください。

注意事項: Greasemonkey プラグインが正常にインストールされているかどうかを知りたい場合は、ブラウザの [ツール] に [Greasemonkey] オプションがあるかどうか、および「リトル モンキー」があるかどうかを確認してください。ブラウジング ステータス バーの右側にある " アイコンと、この "小さな猿" アイコンは灰色ではありません。両方がある場合は、以下に示すように、Greasemonkey プラグインが正常にインストールされていることを意味します。

3. 関連ダウンロード

(1)Firefox ブラウザ: (このバージョンには Greasemonkey プラグインが統合されています)

(2) Greasemonkey プラグイン: http://releases.mozilla.org/pub/mozilla.org/addons/748/greasemonkey-0.8.20080609.0-fx.xpi (アクセスしてインストール)

(3) Jiayuan 会員情報スクリプトの保存: http://snsapps.googlecode.com/svn/trunk/JiaYuan.user.js(アクセスしてインストール)

4. スクリプトのプレビュー

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 配列
*/
var $$ = function(tagName)
{
return document.getElementsByTagName(tagName)
}
/*
if (ウィンドウ) .HTMLElement)
{
HTMLElement.prototype.$=$$;
}
*/
/**
* スタイル名で DOM オブジェクトを検索
* @param {String} className 検索するスタイル名、つまりタグのクラス属性値
* @param {String} tagName フィルター タグ名、オプションのパラメータ、検索範囲を狭めるために使用されます
* @return {Array} DOM Array
* /
var getElementsByClassName = function(className, tagName)
{
var selector = tagName || '*';
var allDom = $$(selector); ;
for (allDom の変数 i)
{
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 = 'コレクション';
//チェックボックスのクリックハンドラー関数を登録します
photoBoxs[a].getElementsByTagName('input')[0].addEventListener('click', jiaYuan.outputHtml, true ); }
}
//HTML コード出力テキスト領域を作成します
var createTextBox = function()
{
var loveCodeDom = document.createElement('textarea'); = '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'); loveCheckBoxs)
{
//チェックボックスがチェックされているメンバー情報のみを出力します
if (loveCheckBoxs[i].checked)
{
var infoList = loveCheckBoxs [i].value.split( '|');
var liHtml = '

' infoList[2] ''
loveHtml = liHtml ;
}
}
$('loveCode').value = loveHtml;
$('loveCode').select(); // コードを簡単にコピーできるようにします。
}
//プログラムの初期化 public メソッド
this.init = function()
{
createCheckBox();
createTextBox()
}
}
//クラスをインスタンス化します
var jiaYuan = new clsJiaYuan();
jiaYuan.init();

5. 注意事項

1. Greasemonkey プラグインを Firefox ブラウザにインストールする場合は、ブラウザのバージョンに対応する Greasemonkey プラグインをインストールすることを選択してください。 Firefox ブラウザの「拡張ポータブル バージョン」をダウンロードすることをお勧めします。このバージョンには通常、Greasemonkey プラグインが統合されています。ダウンロード参照リンク: http://www.jb51.net/softs/21957.html

2. Greasemonkey スクリプトはターゲット Web サイトの HTML 操作に基づいているため、この記事で提供されているスクリプトは Jiayuan.com の改訂により無効になる可能性があります。スクリプトが無効であると思われる場合は、お知らせください。時間内にメッセージをいただければ修正させていただきます。もちろん、スクリプトを作成できる場合は、自分で変更することもできます。変更方法については、http://www.firefox.net.cn/dig/helloworld/editing を参照してください。 .html

3. 現在、Chrome、Opera、さらには IE などの多くのブラウザーが Greasemonkey をサポートしていることがわかります。他のブラウザ プラットフォームでスクリプトに問題がある場合は、メッセージを残して知らせていただくこともできます。

4. Greasemonkey プラグインが有効になっていること、つまりブラウザの右下隅にある「小さな猿」アイコンが灰色になっていないことを確認する必要があります。そうしないと、インストールしても期待どおりの結果が得られません。プラグイン。
著者: WebFlash
出典: http://webflash.cnblogs.com