Kanasansoft Web Lab.

私的Web研究所

Web Lab. > JavaScript > Bookmarklet > [任意のコードを実行するBookmarklet]を使う - [フォーム部品の一覧を作成する Ver1.0]

テンプレート[2005/06/28版]>>

[任意のコードを実行するBookmarklet]を使う - [フォーム部品の一覧を作成する Ver1.0]

Bookmarklet

任意のコードを実行するBookmarklet Ver1.1を使用して、フォーム部品の一覧を作成します。
下のテキストエリアのコードを任意のコードを実行するBookmarklet Ver1.1で実行してみて下さい。
全てのフレームのフォーム部品の一覧が表示されます。
全てのフレームに対し処理を行っていますがフレーム対応Bookmarkletの作成方法とは別の方法で実現しています。
あちらよりもこちらの方が汎用性があると思います。
興味のある方は関数[fncReflexiveCallFrames]とその利用方法を解析してみて下さい。
残念ながらこの一覧表示には次のような制限があります。
ある要素の属性であるノードと同名の子要素がある場合、子要素の取得を優先してしまうようです。
このため、HTML作成処理中にエラーとなってしまい、一覧が正常に表示されません。

正常に動作しない例

<form>

    <input type="text" name="target">

</form>

/*
================================================================================
	Name		:	フォーム部品の一覧を作成する Ver1.0
	In			:	[none]		
	Out			:	[none]		
	Note		:	
--------------------------------------------------------------------------------
	Version		:	Ver1.0		|	2004/12/10	|	新規作成
--------------------------------------------------------------------------------
	Copyright	:	2004-2005 Kanasansoft
	URL			:	www.kanasansoft.com
================================================================================
*/


//===============================================================================
//	Name	:	fncGetTableTitleHTML
//	In		:	[String]	種類
//			:	[String]	タイトル
//	Out		:	[String]	一覧表示用タイトル
//	Note	:	一覧表示用タイトル出力
//===============================================================================
function fncGetTableTitleHTML(strKind,strTitle)
{
	return		"<tr>"																	+
					"<th	class=\""	+	strKind	+	"-title\"	colspan=\"2\"	>"	+
						"<pre>"															+
							strTitle													+
						"</pre>"														+
					"</th>"																+
				"</tr>"																	+
				"\n"																	;
}


//===============================================================================
//	Name	:	fncGetTableTitleHTML
//	In		:	[String]	種類
//			:	[String]	ヘッダ
//			:	[String]	データ
//	Out		:	[String]	一覧表示用項目
//	Note	:	一覧表示用項目出力
//===============================================================================
function fncGetTableLineHTML(strKind,strHead,strData)
{
	return		"<tr>"													+
					"<th	class=\""	+	strKind	+	"-head\"	>"	+
						"<pre>"											+
							strHead										+
						"</pre>"										+
					"</th>"												+
					"<td	class=\""	+	strKind	+	"-data\"	>"	+
						"<pre>"											+
							strData										+
						"</pre>"										+
					"</td>"												+
				"</tr>"													+
				"\n"													;
}


//===============================================================================
//	Name	:	fncEncodeHTML
//	In		:	[String]	エンコード対象文字列
//	Out		:	[String]	エンコード済文字列
//	Note	:	文字列をHTMLエンコードを行う
//===============================================================================
function fncEncodeHTML(str)
{

	var strReturn;

	strReturn	=	((str==undefined||str==null||str=="")?" ":str);

	return			strReturn									.
					replace(	/&/ig	,	"&amp;"		)		.
					replace(	/</ig	,	"&lt;"		)		.
					replace(	/>/ig	,	"&gt;"		)		.
					replace(	/"/ig	,	"&quot;"	)		.
					replace(	/ /ig	,	"&nbsp;"	)		;
}


//===============================================================================
//	Name	:	fncGetFrameIndex
//	In		:	[Frame]		フレームオブジェクト
//	Out		:	[String]	フレームオブジェクトのIndex情報
//	Note	:	親フレームを引数に再帰呼出を行い[window.top]までIndex情報を取得
//===============================================================================
function fncGetFrameIndex(objFrame)
{

	var strFrameIndex	=	"";

	//[window.top]か否か
	if(objFrame.self==objFrame.top)
	{

		//[window.top]であればオブジェクト名を追加
		strFrameIndex	+=	"window.top";

	}else{

		//親フレームを引数に再帰呼出
		strFrameIndex	+=	fncGetFrameIndex(objFrame.parent);

		//現在のフレームのIndexを取得
		var	objFrames	=	objFrame.parent.frames;
		for(i=0;i<objFrames.length;i++)
		{
			if(objFrame.self==objFrames[i])
			{
				numFrames	=	i;
				break;
			}
		}

		//現在のフレームのオブジェクト名とIndexを追加
		strFrameIndex	+=	".frames["	+	i	+	"]";

	}

	return strFrameIndex;

}


//===============================================================================
//	Name	:	fncMakeWindowFormsElementsInfoTable
//	In		:	[Window]	ウィンドウオブジェクト
//	Out		:	[String]	ウィンドウ情報とウィンドウ内フォーム部品一覧情報
//	Note	:	ウィンドウ情報とウィンドウ内フォーム部品一覧情報のテーブルを作成する
//===============================================================================
function fncMakeWindowFormsElementsInfoTable(objWindow)
{

	var i;
	var j;
	var k;
	var strHTML			=	"";

	var objForms;
	var objElements;
	var objOptions;

	//----------------------------------------
	//テーブル作成
	//----------------------------------------fncGetTableLineHTML
	strHTML						+=	"<table>";

	//ウィンドウ情報
	strHTML						+=	fncGetTableTitleHTML(	"window"	,	"WINDOW"																			);
	strHTML						+=	fncGetTableLineHTML(	"window"	,	"TITLE"				,	fncEncodeHTML(objWindow.document.title)						);
	strHTML						+=	fncGetTableLineHTML(	"window"	,	"URL"				,	fncEncodeHTML(objWindow.location.href)						);
	strHTML						+=	fncGetTableLineHTML(	"window"	,	"NAME"				,	fncEncodeHTML(objWindow.name)								);
	strHTML						+=	fncGetTableLineHTML(	"window"	,	"ID"				,	fncEncodeHTML(objWindow.id)									);
	strHTML						+=	fncGetTableLineHTML(	"window"	,	"INDEX"				,	fncEncodeHTML(fncGetFrameIndex(objWindow))					);

	//フォーム情報
	objForms								=	objWindow.document.forms;
	for(i=0;i<objForms.length;i++)
	{
		strHTML					+=	fncGetTableTitleHTML(	"form"		,	"FORM"																				);
		strHTML					+=	fncGetTableLineHTML(	"form"		,	"NAME"				,	fncEncodeHTML(objForms[i].name)								);
		strHTML					+=	fncGetTableLineHTML(	"form"		,	"ID"				,	fncEncodeHTML(objForms[i].id)								);
		strHTML					+=	fncGetTableLineHTML(	"form"		,	"INDEX"				,	fncEncodeHTML(String(i))									);
		strHTML					+=	fncGetTableLineHTML(	"form"		,	"ACTION"			,	fncEncodeHTML(objForms[i].action)							);
		strHTML					+=	fncGetTableLineHTML(	"form"		,	"METHOD"			,	fncEncodeHTML(objForms[i].method)							);
		strHTML					+=	fncGetTableLineHTML(	"form"		,	"TARGET"			,	fncEncodeHTML(objForms[i].target)							);
		strHTML					+=	fncGetTableLineHTML(	"form"		,	"ENCODING"			,	fncEncodeHTML(objForms[i].encoding)							);

		//エレメント情報
		objElements				=	objForms[i].elements;
		for(j=0;j<objElements.length;j++)
		{

			strHTML				+=	fncGetTableTitleHTML(	"element"	,	"ELEMENT"																			);
			strHTML				+=	fncGetTableLineHTML(	"element"	,	"TYPE"				,	fncEncodeHTML(objElements[j].type)							);
			strHTML				+=	fncGetTableLineHTML(	"element"	,	"NAME"				,	fncEncodeHTML(objElements[j].name)							);
			strHTML				+=	fncGetTableLineHTML(	"element"	,	"ID"				,	fncEncodeHTML(objElements[j].id)							);
			strHTML				+=	fncGetTableLineHTML(	"element"	,	"INDEX"				,	fncEncodeHTML(String(j))									);

			switch(objElements[j].type)
			{
				case "text":
				case "textarea":
				case "hidden":
				case "password":
				case "file":
					strHTML		+=	fncGetTableLineHTML(	"element"	,	"VALUE"				,	fncEncodeHTML(objElements[j].value)							);
					strHTML		+=	fncGetTableLineHTML(	"element"	,	"DEFAULT VALUE"		,	fncEncodeHTML(objElements[j].defaultValue)					);
					break;
				case "radio":
				case "checkbox":
					strHTML		+=	fncGetTableLineHTML(	"element"	,	"VALUE"				,	fncEncodeHTML(objElements[j].value)							);
					strHTML		+=	fncGetTableLineHTML(	"element"	,	"CHECKED"			,	fncEncodeHTML(objElements[j].checked?"TRUE":"FALSE")		);
					strHTML		+=	fncGetTableLineHTML(	"element"	,	"DEFAULT CHECKED"	,	fncEncodeHTML(objElements[j].defaultChecked?"TRUE":"FALSE")	);
					break;
				case "select-one":
				case "select-multiple":
					strHTML		+=	fncGetTableLineHTML(	"element"	,	"VALUE"				,	fncEncodeHTML(objElements[j].value)							);
					//オプション情報
					objOptions	=	objElements[j].options;
					for(k=0;k<objOptions.length;k++)
					{
						strHTML	+=	fncGetTableTitleHTML(	"option"	,	"OPTION"																			);
						strHTML	+=	fncGetTableLineHTML(	"option"	,	"NAME"				,	fncEncodeHTML(objOptions[k].name)							);
						strHTML	+=	fncGetTableLineHTML(	"option"	,	"ID"				,	fncEncodeHTML(objOptions[k].id)								);
						strHTML	+=	fncGetTableLineHTML(	"option"	,	"INDEX"				,	fncEncodeHTML(String(k))									);
						strHTML	+=	fncGetTableLineHTML(	"option"	,	"VALUE"				,	fncEncodeHTML(objOptions[k].value)							);
						strHTML	+=	fncGetTableLineHTML(	"option"	,	"TEXT"				,	fncEncodeHTML(objOptions[k].text)							);
						strHTML	+=	fncGetTableLineHTML(	"option"	,	"SELECTED"			,	fncEncodeHTML(objOptions[k].selected?"TRUE":"FALSE")		);
						strHTML	+=	fncGetTableLineHTML(	"option"	,	"DEFAULT SELECTED"	,	fncEncodeHTML(objOptions[k].defaultSelected?"TRUE":"FALSE")	);
					}
					break;
				case "button":
				case "reset":
				case "submit":
					strHTML		+=	fncGetTableLineHTML(	"element"	,	"VALUE"				,	fncEncodeHTML(objElements[j].value)							);
					break;
				default:
					alert("default");
					break;
			}

		}

	}

	strHTML						+=	"</table>";
	strHTML						+=	"<br>";
	strHTML						+=	"\n";

	return strHTML;
}


//===============================================================================
//	Name	:	fncReflexiveCallFrames
//	In		:	[Window]	処理対象親ウィンドウ
//			:	[Function]	処理内容(ウィンドウオブジェクトが引数の関数)
//	Out		:	[String]	処理結果
//	Note	:	渡された親ウィンドウオブジェクトとその配下のウィンドウオブジェクトを引数に、渡された処理内容を呼び出す
//===============================================================================
function fncReflexiveCallFrames(objWindow,objFunction)
{

	var i;
	var str		=	"";

	try
	{
		//渡されたファンクションを呼び出す
		str		+=	objFunction(objWindow);
	}
	catch(e)
	{
	}

	//配下のウィンドウオブジェクト(フレーム)を引数に再帰呼出
	for(i=0;i<objWindow.frames.length;i++)
	{
		try
		{
			str		+=	fncReflexiveCallFrames(objWindow.frames[i],objFunction);
		}
		catch(e)
		{
		}
	}

	return str;
}


//フォーム部品の一覧を作成する
var objSubWin=window.opener.open();
objSubWin.document.open();
objSubWin.document.write("<html>");
objSubWin.document.write("<head>");
objSubWin.document.write("<title>フォーム部品の一覧を作成する Ver1.0</title>");
objSubWin.document.write("<style>");
objSubWin.document.write("<!--");
objSubWin.document.write("*{font-size:12px;font-family:monospace;}");
objSubWin.document.write("body{margin:0px;padding:0px;}");
objSubWin.document.write("table{margin:0px;padding:0px;width:100%;border:1px solid #000000;}");
objSubWin.document.write("th,td{margin:0px;padding:0px;border:1px solid #000000;}");
objSubWin.document.write("th.window-head{width:200px;}");
objSubWin.document.write("th.form-head{width:200px;}");
objSubWin.document.write("th.element-head{width:200px;}");
objSubWin.document.write("th.option-head{width:200px;}");

objSubWin.document.write("th.window-title{color:#000000;background-Color:#ffcccc;}");
objSubWin.document.write("th.window-head{color:#000000;background-Color:#ffcccc;}");
objSubWin.document.write("td.window-data{color:#000000;background-Color:#ffffff;}");

objSubWin.document.write("th.form-title{color:#000000;background-Color:#ccffcc;}");
objSubWin.document.write("th.form-head{color:#000000;background-Color:#ccffcc;}");
objSubWin.document.write("td.form-data{color:#000000;background-Color:#ffffff;}");

objSubWin.document.write("th.element-title{color:#000000;background-Color:#ccccff;}");
objSubWin.document.write("th.element-head{color:#000000;background-Color:#ccccff;}");
objSubWin.document.write("td.element-data{color:#000000;background-Color:#ffffff;}");

objSubWin.document.write("th.option-title{color:#000000;background-Color:#ffffcc;}");
objSubWin.document.write("th.option-head{color:#000000;background-Color:#ffffcc;}");
objSubWin.document.write("td.option-data{color:#000000;background-Color:#ffffff;}");

objSubWin.document.write("pre{margin:0px;padding:0px;}");
objSubWin.document.write("-->");
objSubWin.document.write("</style>");
objSubWin.document.write("</head>");
objSubWin.document.write("<body>");
objSubWin.document.write(fncReflexiveCallFrames(window.opener.top,fncMakeWindowFormsElementsInfoTable));
objSubWin.document.write("</body>");
objSubWin.document.write("</html>");
objSubWin.document.close();

投稿者 Kanasansoft : 2005/06/28

このエントリーのトラックバックURL

http://www.kanasansoft.com/cgi/mt/mt-tb.cgi/31

トラックバック一覧

このエントリーに対するトラックバックはありません。

コメント一覧

このエントリーに対するトラックバックはありません。

コメント投稿

<<各エントリーのテキストボックスはソースです

テンプレート[2005/06/28版]>>