フレームでページ内検索機能

このQ&Aのポイント
  • 2分割のフレームで名前はmenuとmainとします。menu画面で文字列を入力させ、main画面内の文字列を検索する機能を作っています。
  • ボタンを1回押したときに最初に一致する文字列が反転するところまでは出来ます。2回目以降に押したときに次に一致する文字列を反転させたい。
  • Netscapeでは出来ていますが、IEでの方法が分かりません。ご教授お願いします。
回答を見る
  • ベストアンサー

フレームでページ内検索機能

2分割のフレームで名前はmenuとmainとします。 menu画面で文字列を入力させ、main画面内の文字列を検索する機能を作っています。 ボタンを1回押したときに最初に一致する文字列が反転するところまでは出来ます。 2回目以降に押したときに次に一致する文字列を反転させたい。 Netscapeでは出来ていますが、IEでの方法が分かりません。 ご教授お願いします。 'menuのソース <form onsubmit="return myFindText(this.key.value)"> <input type=text name=key> <input type=submit value="検索"> </form> function myFindText(text) { if(document.all){ // IE4 var target = parent.main.document.body.createTextRange(); if (target.findText(text)){ target.select(); target.scrollIntoView(); } } else if(document.layers){ //NN4 parent.main.window.find(text); } return false; }

質問者が選んだベストアンサー

  • ベストアンサー
  • me_no_car
  • ベストアンサー率24% (22/90)
回答No.1

これでどうでしょうか? <SCRIPT> var fCnt = 0; function myFindText( text ) {   // IE   if( document.all ){     var targe=parent.main.document.body.createTextRang();     var iLoop;     var found;     for( iLoop=0 ; iLoop <= fCnt && (found = target.findText( text )) != false; iLoop++ )     {       target.moveStart("character", 1);       target.moveEnd("textedit");     }     if ( found ) {       target.moveStart("character", -1);       target.findText( text );       target.select();       target.scrollIntoView();       fCnt++;     }     else {       if (fCnt > 0) {         fCnt = 0;         myFindText( text ); }       else{         alert( text + " は見つかりませんでした。");       }     }   }   // NN   else if(document.layers)   {     parent.main.window.find(text);   }   return false; } </SCRIPT>

todo36
質問者

お礼

回答ありがとうございます。 完璧です。

関連するQ&A

  • ページ内検索の限界?

    以下のjavascriptを記述してページ内のテキストを検索して移動するという処理をしているのですが、HTMLソースで5万行以降のテキストの検索ができません。 5万行以下のテキストの検索はできるのですが、5万行を超えるテキストを検索すると反応しません。 これはjavascript上の制限事項になるんでしょうか? var fFirst; //はじめかどうかのフラグ var objRange; //TextRangeオブジェクト //検索関数 function Start() { objRange = document.body.createTextRange(); //文字列が空であれば終了 if (document.search_form.txtWord.value.length == 0) { return; } strCheck = document.search_form.txtWord.value; if (fFirst) { fFirst = false; } else { //2度目以降 objRange.move("character", 1); } //セレクトする if (objRange.findText(strCheck)) { objRange.select(); objRange.scrollIntoView(); } }

  • 検索機能を付けたhtmlにジャンプ機能を付けたい

    いま、下のような状態で作成しています。 <html lung="ja"> <head> <title>参考資料</title> </head> <body> <!--search--> <form method="get" action="" name="search"> <div class="search">キーワード検索(キーワード入力>「Search」押下)・・・赤く反転したところが、該当箇所です<br /> <input id="search" name="search" size="20" style="width:300px" class="form" /> <input type="hidden" name="mySearch" value="" /> <input type="button" value="Search" class="button" onClick="javascript:doSearch()" /> </div> </form> <pre>   ・   ・   ・ </pre> <script type="text/javascript" language="javascript"> <!-- // フォント(font = "" などを指定する) var fontName = ""; // フォントカラー(変更しない場合は、fontColor = "" とする) var fontColor = ""; // フォントサイズ(単位はpx、変更しない場合は 0 を指定する) var fontSize = 0; // 太字(0:太字にしない、1:太字にする) var isBold = 0; // 斜体(0:斜体にしない、1:斜体にする) var isItalic = 0; // 下線(0:下線をつけない、1:下線をつける) var isUnderline = 0; // 背景色(変更しない場合は、backColor = "" とする) var backColor = "#FF8080"; searchWordHighlighting(); function searchWordHighlighting() { if (!document.body.createTextRange) return; var range = document.body.createTextRange(); var searchStr = getSearchStr(); if (searchStr == "") return; range.collapse(true); while (range.findText(searchStr)){ if (fontName != "") range.execCommand("fontName", true, fontName); if (fontSize > 0) range.execCommand("fontSize", true, fontSize); if (fontColor != "") range.execCommand("foreColor", true, fontColor); if (isBold != 0) range.execCommand("bold"); if (isItalic != 0) range.execCommand("italic"); if (isUnderline != 0) range.execCommand("underline"); if (backColor != "") range.execCommand("backColor", false, backColor); range.collapse(false); } } function getSearchStr() { var urlStr = "" + window.location; var baseStr = "mySearch="; var index = urlStr.indexOf(baseStr); if (index == -1) return ""; urlStr = urlStr.split("%25"); urlStr = urlStr.join("%"); return decodeURIComponent((urlStr.substring(index + baseStr.length)).replace("%25", "%")); } function doSearch() { window.document.search.mySearch.value=encodeURIComponent(window.document.search.search.value); window.document.search.submit(); } //--> </script> </body> </html> これに「Serch」クリック後、該当箇所にジャンプする機能を付けたいです。 教えていただければ幸いです。 宜しくお願いします。

  • 通し番号の変数を一括チェックするには?

    JavaScriptでフォームの入力値のチェックを行う プログラムを書いています。 OnSubmitで処理を行っているのですが、チェック対象の テキストボックスが大量に存在しているので、 なんとか効率良く処理できないでしょうか? if( !NumCheck(form.text1.value) || !NumCheck(form.text2.value) || !NumCheck(form.text3.value) || /* ・・・ */ !NumCheck(form.text100.value) ) これをforか何かで回せるとベストなのですが…。 PHPのように文字列を変数名に変換する方法など、 なにか良いアプローチがありましたらご教示願います。 問題の部分抽出したHTMLを下に載せておきます。 そのままでは動きませんが、雰囲気が伝わればと。 インデントがなくてすみません。 よろしくお願いいたします。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <script type="text/javascript"> <!-- function submitCheck(form){ if( !NumCheck(form.text1.value) || !NumCheck(form.text2.value) || !NumCheck(form.text3.value) || /* ・・・ */ !NumCheck(form.text100.value) ) { alert('入力エラー'); return false; } return true; } function NumCheck(value){ var tmp = value.match(/[0-9]+/g); if(tmp != value) return false; return true; } //--> </script> </head> <body> <form name="form1" action="test.cgi" target=_self method="post" onSubmit="return submitCheck(this);"> <input type="text" name=text1> <input type="text" name=text2> <input type="text" name=text3> /* ・・・ */ <input type="text" name=text100> </form> </body> </html>

  • JavaScript文字列連携に関して

    質問させて頂きます。 下記のようなテキストフォームがあったとして、submit押された時に、jsを走らせ、テキストに数値以外が入っていないかチェックしたいと考えています。 ------------------------------------------------- <input type="text" name="text_1" /> <input type="text" name="text_2" /> <input type="text" name="text_3" /> ------------------------------------------------- チェック自体は下記のような記述で行うことが出来ました。 ------------------------------------------------- if(document.form1.text_1.value.match(/[^0-9]+/)){ //文字です } if(document.form1.text_2.value.match(/[^0-9]+/)){ //文字です } if(document.form1.text_3.value.match(/[^0-9]+/)){ //文字です } ------------------------------------------------- ですが、同じif文を並べて記述したくなかったので、for文を使って記述したいと考えました。 ------------------------------------------------- for (var i=1 ; i<=3 ; i++){ if(document.form1.text_1.value.match(/[^0-9]+/)){ //文字です } } ------------------------------------------------- この時、if文内のtext_1をどのように記述すれば、text_1,text_2,text_3と変化させることが出来るでしょうか。 ※「text_ + i +」等試してみましたが、正常に動作出来ませんでした。 ご存知の方がいらっしゃいましたら、ご教授頂けると助かります。 また、質問の内容に不備な点があるかもしませんが、その際はご指摘頂けると幸いです。 よろしくお願いいたします。

  • 別のページにデータを送るには?

    JavaScriptで、別のページにデータを送るにはどうしたらよいのでしょうか。 1ページ目でテキストボックスに入力した文字列を、 2ページ目で、あらかじめ用意した文字列と一致するかどうかチェックする、 というのをやりたいのですが、なにぶん初心者なもので、どうも何かに失敗しているらしくうまくいきません。 一応、JavaScript解説のサイトさんを参考にこんなもんを作ってはみたのですが。 1ページ目 <html> <head> </head> <body> <form action="pas2.html" onSubmit="this.box.value=escape(this.box.value)"> <input type=text name=box> <input type=submit value=" 送 信 "> <input type=reset value="リセット"> </form> </body> </html> 2ページ目 <html> <head> </head> <body> <script> val = document.location.search; val = val.split("="); val = unescape(unescape(val[1])); if (val){ if(val==none||val!="pass") val="はずれ" else val="あたり" } else val = "何にも入力されてません。"; document.write(val); </script> </body> </html> これでやってもエラーが出ます…… どうやったらいいのでしょうか。教えてください。

  • フレーム内検索をCGI/CSS以外で実行する方法

    フレーム内検索をCGI/CSS以外で実行する方法はありますか? ウェブページをフレームで作っているのですが、メニュー側に検索窓を設けて、メイン側(もしくはフレーム関係なく別タブ開いてもかまいません)に検索結果を表示したいと考えています。 とある人のソースを真似ているのですがその人はCGIで検索を行っていました。しかし私の使っているドメインはCGI非対応です。googleを利用した検索も試してみました。しかしフレームなしならうまくいくのですがフレームありではメインページが真っ白になるだけになります。 ちなみにそのときのソースは大体こんな感じです。 <html> <head> <script> <!-- function addstring() { document.forms[0].q.value = 'site:??.com ' + document.forms[0].q.value; return true; } // --> </script> <base target="main"> </head> <body> <form onSubmit="addstring()" action="http://www.google.com/search"> <input type="hidden" name="hl" value="ja" /> <input type="hidden" name="ie" value="UTF-8"> <input type="hidden" name="oe" value="UTF-8"> <input type="text" name="q" size="31" maxlength="256" value="" /> <input type="submit" name="btnG" value="検索" /> </form> </body> </html> 不可能であるなら検索はあきらめることにします。 ご教授よろしくお願いします。

  • 検索表示について

    このようなプルダウン付きの検索バーを作成しています。 この検索結果をこの検索バーの下に表示させるためにはどうすればいいでしょうか?よろしくお願いします。 <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <meta http-equiv="Content-Script-Type" content="text/javascript"> </head> <body> <script type="text/javascript"> <!-- var site = new Array(); var target = "main"; site[0] = ["Goo", "http://search.goo.ne.jp/web.jsp", "MT", ["from", "USR"], ["IE", "sjis"]]; site[1] = ["Google", "http://www.google.com/search", "q", ["hl", "ja"], ["ie", "Shift_JIS"]]; site[2] = ["Yahoo", "http://search.yahoo.co.jp/bin/search", "p",["ei", "Shift_JIS"]]; window.onload = function() { if (!document.createElement) return; if (document.all && !window.clipboardData && !window.opera) return; // 検索サイトのリストを生成 var select = document.createElement("select"); select.id = "addlist"; for (var i = 0; i < site.length; i++) { var opt = document.createElement("option"); opt.value = i; var str = document.createTextNode(site[i][0]); opt.appendChild(str); select.appendChild(opt); } // デフォルトで選択状態にする場合はその配列番号を option[n] に指定 // select.options[3].selected = true; // 既存の検索フォームにこのドロップダウンを追加 var obj = document.forms[0]; obj.elements[obj.elements.length - 1].value = "検索"; obj.insertBefore(select, obj.elements[1]); // フォームが送信された時に selectSearch() を呼び出す obj.onsubmit = selectSearch; } function jump(){ var url = document.form.select.options[document.form.select.selectedIndex].value; if(url != "" ){ if(target == 'top'){ top.location.href = url; } else if(target == 'blank'){ window.open(url, 'window_name'); } else if(target != ""){ eval('parent.' + target + '.location.href = url'); } else{ location.href = url; } } } function selectSearch() { var str = document.forms[0].p.value; // 入力された検索文字 var num = document.forms[0].addlist.value; // 選択されたリストの番号 // 選択された検索サイトのフォーム生成(送信先の指定) var setform = document.createElement("form"); setform.action = site[num][1]; setform.method = "GET"; // setform.target = "_blank"; // 検索結果を新しいウインドウに表示する場合に追加 // 検索文字クエリ var query = document.createElement("input"); query.type = "hidden"; query.name = site[num][2]; query.value = str; setform.appendChild(query); // 検索文字以外のクエリ if (site[num].length > 3) { for (var i = 3; i < site[num].length; i++) { var extra = document.createElement("input"); extra.type = "hidden"; extra.name = site[num][i][0]; extra.value = site[num][i][1]; setform.appendChild(extra); } } // 生成したフォームを文末に追加してそのフォームを送信 document.body.appendChild(setform); setform.submit(); // document.forms[document.forms.length - 1].submit(); return false; } // --> </script> <br> <form action="http://search.yahoo.co.jp/bin/search" method="GET"> <input type="text" name="p" value="" size="50" maxlength=255 > <input type="submit" value="検索"> </form> </body> </html>

  • 文字列に空白を含んだ場合の処理

    現在、文字列の入力チェックの関数を作成しています。 function checkMemberId() { if(document.form1.memberId.value==undefined){ alert("番号を入力してください。"); return false; }else if(??????????){ alert("空白が含まれています。"); return false; }else { alert("半角数字を入力してください。"); return false; } } 上記の else if の条件に、document.form1.memberIdに空白を含んだ文字列が入力されたらアラートメッセージを出すという処理を記述したいのですが、どういう処理を記述すればよいのでしょうか。 空白は全角・半角とも対象で、すべて空白が入力された時も同様の処理にしたいです。 以下、該当のHTML部です。 <form name="form1"> <input type="text" name="memberId"> </form> 以上、よろしくお願い致します。

  • JavaScriptを使った計算フォーム

    JavaScriptを使った計算フォームで質問です。 人数をテキストボックスに入力し、そのあと項目を選ぶと計算がされるようにしたいのですが ラジオボタンが持っているvalueを取り出せません。 下記の「←------???」と書いてあるところを何とかすれば完成だと思うのですが、 どなたか教えていただけないでしょうか? <script language="JavaScript" type="text/JavaScript"> function sjLeft(source,length) { if (source.length < length) { return (""); } return source.substr(0, length); } function sjReplace(source,start,length,target) { sjlen = source.length; if ((start > sjlen) || (start < 0)) { return String(""); } return String(sjLeft(source,start ) + target + source.substr(start+length, sjlen)); } function sjInsert( source, start, target) { return sjReplace(source,start,0,target); } function fcheck(obj) { s1_2value = ??? * new Number(document.form1.n1.value); ←------??? document.form1.s1_2.value = String(s1_2value); document.form1.total.value = s1_2value; return true; } </script> <form name="form1" method="POST"> <table width="400" border="1"> <tr> <td>人数</td> <td></td> <td><input type=text name=n1 size=8 onChange="fcheck(this);">人</td> <td></td> </tr> <tr> td><input name="n2" type="radio" value="13000" onChange="fcheck(this);">食事A</td> <td>\13,000</td> <td>×人数</td> <td><input name=s1_2 type=text size=8 readonly>円</td> </tr> <tr> <td colspan="2">&nbsp;</td> <td>総計</td> <td><input type=text readonly name=total size=10>円</td> </tr> </table> </form>

  • テキストボックス未記入時のアラート表示 JS

    【出来ていること】 下記のように電話番号の未入をチェックしアラートを出すことができました。 <script> function check3() { tel3check = document.form3.tel3.value; data13 = tel3check; if(!data13) { alert("電話番号が未入力です13"); return; } else { document.form3.submit(); } } </script> <form method="POST" action="in.php" name = "form3"> <input type="text" name="tel3" value="" /> <input type="button" value="確認" name="sub1" onclick="check3();"> </form> 【躓いていること】 電話番号の未入だけでなく、FAXの未入もチェックしそれぞれでアラートを出そうとしましたが動きません。ご指導いただけますでしょうか? よろしくお願いいたします。 <script> function check3() { tel3check = document.form3.tel3.value; fax3check = document.form3.fax3.value; data13 = tel3check; data133 = fax3check; if(!data13) { alert("電話番号が未入力です13"); return; } elseif(!data133) { alert("FAX番号が未入力です133"); return; } else { document.form3.submit(); } } </script> <form method="POST" action="in.php" name = "form3"> <input type="text" name="tel3" value="" /> <input type="text" name="fax3" value="" /> <input type="button" value="確認" name="sub1" onclick="check3();"> </form>

専門家に質問してみよう