アナログブラウザの検索機能

アナログブラウザの検索機能(Ctrl+F)は、同時にIEとChromeに対応しています.
時間:2013-01-02 00:07
ソース:インターネット 
作者:インターネット 
フロントエンドWebインタフェースをするときは、jsシミュレーションブラウザの検索機能が必要になります.ここでは、IEとChromeブラウザでjsを使ってこの機能をシミュレートする方法を紹介します.  一、IEブラウザ  IEブラウザでは、主にIEブラウザでテキストを検索するためにTextRangeオブジェクトを使用する必要があります.  どのようにオブジェクトを作成しますか?  通常はページ全体で検索する場合、メソッドdocument.body.create TextRange()を呼び出すだけでよい.どのように特定のオブジェクト内で検索するかというと、例えば、textAreaは、Dcuement.getElement ById('text Areade').createTextRange()を呼び出す必要があります.  対象TextRangeには開始位置と終了位置の二つの比較的重要な概念があり、TextRangeオブジェクトを作成した後、開始位置はデフォルトでルックアップドメイン全体の開始位置となり、終了位置はデフォルトでルックアップドメイン全体の終了位置となります.textAreaを例に挙げると、textArea全体の先頭とエンディングです.  TextRangeオブジェクトを作成すると、文字列はどのように検索されますか?  私たちはTextRangeオブジェクトのfindText()方法を使いたいです.検索方法を呼び出したら、この方法は私たちが検索したい文字列を下に探し続けます.開始位置と終了位置は現在検索した文字列の開始位置と終了位置としてデフォルトで設定されています.次の検索論理が実行されると、現在の先頭から検索が開始されます.  どのようにブラウザで私たちが見つけた文字列を選択しますか?  TextRangeオブジェクトのselect()を呼び出すと良いです.  検索の内容が多すぎる場合、現在検索されている文字列は視認範囲内にないかもしれません.ブラウザを自動的に配置するにはどうすればいいですか?  TextRangeオブジェクトを呼び出すscrollIntoView()方法は、画面を適切な位置にスクロールすることができます.  二、Googleブラウザ  Googleのブラウザーの中で比較的に簡単で、windowの下のfind方法を呼び出すだけでいいです.ただし、ループルックアップが必要な場合は、2つのパラメータを多く設定する必要があります. 

window.find(searchValue,false,true);

三、完全な実例コードは以下の通りです. 

	//           ， 0  
	var nextIndex = 0;
	//           
	var searchValue = '';

	function findInPage(targetEle,searchText) {
		//          
		if (!searchText){
			alert('       ');
		}
		//            
		if(searchText && searchText != searchValue && nextIndex > 0){
			searchValue = searchText;
			nextIndex = 0;
		}else{
			searchValue = searchText;
		}

		if (document.all) {
			txt = targetEle.createTextRange();
			//  str
			var found = '';
			//   nextIndex     。       ，   TextRange          ，              。      n       ，     findText()    ，                    。
			for (i = 0; i <= nextIndex && (found = txt.findText(searchValue))==true; i++) {
				txt.moveStart("character", 1);
				txt.moveEnd("textedit");
			}
			//          
			if (found) {
                                //     -1，       。       ，              nextIndex      ，             ，           ，      findText()    ，                 
				txt.moveStart("character", -1);
				txt.findText(searchValue);
				txt.select();
                                //         
				txt.scrollIntoView();
				nextIndex++;
			}else{
				//    
				if (nextIndex > 0) { 
					nextIndex = 0; 
					findInPage(searchValue); 
				}
			}
		}else{
			//      
			window.find(searchValue,false,true);
		}
	}