ハイライト表示が消えてしまう
- フレームを使って右側のリンクリスト（right.html）をクリックした際に、左側に表示されたHTMLの文言をハイライト表示させたいと思っています。しかし、一瞬ハイライトしてすぐに消えてしまいます。
- index.htmlのフレームの設定やright.htmlのスクリプトを修正してもハイライトが消えてしまう問題を解決する方法が知りたいです。
- 左側に表示されたHTMLの文言をハイライト表示させる際に、ハイライトが一瞬で消えてしまう問題についての質問です。
- ベストアンサー
ハイライト表示が消えてしまう
フレームを使って、右側のリンクリスト（right.html）をクリックした際に、左側に表示されたHTMLの文言をハイライト表示させたいと思っています ある程度は出来てきたのですが、一瞬ハイライトしてすぐに消えてしまうのです・・・ どなたかお助けして頂けませんでしょうか 宜しくお願い致します ～index.html～ <head> <meta content="text/html; charset=Shift-JIS" http-equiv="content-type"> <title>ハイライト表示</title> </head> <frameset cols="1031,*" frameborder="no" border="0" framespcing="0"> <frame src="#" scrolling="yes" id="left" name="left"> <frame src="right.html" scrolling="yes" id="right" name="right" noresize="noresize"> </frameset> <body> </body> </html> ～right.html～ <head> <meta content="text/html; charset=Shift-JIS" http-equiv="content-type"> <script language="javascript"> <!-- function change(str,url){ parent.left.location.href=url; var re=new RegExp(str,"g"); var b=parent.left.document.body; var ss=b.innerHTML; b.innerHTML= ss.replace(re,"<span style=\"background:#77ff77;font-weight:bold\">"+str+"</span>"); } //--> </script> </head> <body> <ls><a href="#" onclick="change('建物','left_1.html')">left_1.html</a></ls> <ls><a href="#" onclick="change('建物','left_2.html')">left_2.html</a></ls> <ls><a href="#" onclick="change('建物','left_3.html')">left_3.html</a></ls> </body> </html> ちなみにleft_1.html等のリンク先のHTMLは修正する事が出来ません 何卒宜しくお願い致します
- zenigame99
- お礼率100% (11/11)
- JavaScript
- 回答数2
- ありがとう数2
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
それは、左フレームがロード完了・表示するタイミングを、右フレームで うまく制御できてないからではないだろうか？ 下のように、親でハイライトさせるようにすればうまくいきます。 親（～index.html～） <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="ja-JP"> <head> <title>ハイライト表示</title> <script type="text/javascript" charset="utf-8"> <!-- var str; function left_load(){ if(str){ var re=new RegExp(str,"g"); var b=left.document.body; var ss=b.innerHTML; b.innerHTML= ss.replace(re,"<span style=\"background:#77ff77;font-weight:bold\">"+str+"</span>"); } } // --> </script> </head> <frameset cols="1031,*" frameborder="no" border="0" framespcing="0"> <frame src="about:blank" onload="left_load();" scrolling="yes" id="left" name="left"> <frame src="right.html" scrolling="yes" id="right" name="right" noresize="noresize"> </frameset> </html> ～right.html～ <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="ja-JP"> <head> <title>ハイライト表示選択</title> <script type="text/javascript" charset="utf-8"> <!-- function change(str,url){ parent.str = str; parent.left.location.href=url; } // --> </script> </head> <body> <ol> <li><a href="#" onclick="change('建物','left_1.html')">left_1.html</a></li> <li><a href="#" onclick="change('建物','left_2.html')">left_2.html</a></li> <li><a href="#" onclick="change('建物','left_3.html')">left_3.html</a></li> </ol> </body> </html>
その他の回答 (1)
- yyr446
- ベストアンサー率65% (870/1330)
ご提示のソースで気になった点 まず親”index.html”で <frameset cols="1031,*" frameborder="no" border="0" framespcing="0"> 左側の幅を1031pxにしてますが、よほど大きい画面でないと右側まで表示できないのでは... ※私は、500,*に直してテストしました。 right.htmlで気になった点 <ls>ってのが何の事なのかわからないので、 勝手に <ol> <li>．．．．</li> <li>．．．．</li> ．．．． </ol> に直しました。 No1の回答のソースをそのままコピペしてもだめですか？ （※ charset="utf-8"は私の外し忘れですが...） （※ frameset cols="1031,*" は frameset cols="500,*" に直してみそ） 後はなんじゃろう．．．． 少なくとも私はうまくいきました。
お礼
出来ました！というか私の環境の問題だったようです・・・ 別のＰＣでやったら普通に動きました（汗 ありがとうございました また何かあった時はよろしくお願い致します
関連するQ&A
- ハイライト表示（タグの中を除きたい）
HTMLの特定文言をハイライト表示をする為に下記のような感じでjavascriptを組んだのですが、altの中身までreplaceしてしまい、altの中に文言があるとHTMLの形が崩れて画像も表示されなくなってしまいます これをなんとかしたいのですが、タグの中を置換しない方法はありますでしょうか もしくは下記の方法でなく「これならタグの中身を抜かしてハイライト出来る」という物はありませんでしょうか 何卒宜しくお願い致します ～現在の方法は以下～ 親（～index.html～） <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="ja-JP"> <head> <title>ハイライト表示</title> <script type="text/javascript" charset="utf-8"> <!-- var str; function left_load(){ if(str){ var re=new RegExp(str,"g"); var b=left.document.body; var ss=b.innerHTML; b.innerHTML= ss.replace(re,"<span style=\"background:#77ff77;font-weight:bold\">"+str+"</span>"); } } // --> </script> </head> <frameset cols="1031,*" frameborder="no" border="0" framespcing="0"> <frame src="about:blank" onload="left_load();" scrolling="yes" id="left" name="left"> <frame src="right.html" scrolling="yes" id="right" name="right" noresize="noresize"> </frameset> </html> ～right.html～ <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="ja-JP"> <head> <title>ハイライト表示選択</title> <script type="text/javascript" charset="utf-8"> <!-- function change(str,url){ parent.str = str; parent.left.location.href=url; } // --> </script> </head> <body> <ol> <li><a href="#" onclick="change('建物','left_1.html')">left_1.html</a></li> <li><a href="#" onclick="change('建物','left_2.html')">left_2.html</a></li> <li><a href="#" onclick="change('建物','left_3.html')">left_3.html</a></li> </ol> </body> </html>
- ベストアンサー
- JavaScript
- ハイライト表示をしたい
2度目の投稿（前回の投稿 http://oshiete1.goo.ne.jp/qa5506744.html）になりますが、指定の文言を色を変えて目立つように（以下ハイライト表示）させたいと思っています 最初に作った物はタグの中（altの中）まで置換をしてしまい、HTMLがくずれるという始末・・・ そこでこのサイトで質問した所、以下のスクリプトを教えて頂きました ところがfirefoxだと動くのですが、IE（IE６しか入っていない環境で使いたい）では動きません 色々調べたところ「フレーム越しの要素コピーは，FFではできて，IEではできないらしい」というのが原因じゃないかという所まで辿り着きました まだjavascript初心者で勉強中な為、教えて頂いたスクリプトも全部理解している訳ではありませんが、どなたか解決方法を教えて頂けないでしょうか 何卒宜しくお願い致します 以下教えて頂いたスクリプト <!-- var str; function left_load(){ if(str){ search(left.document.getElementsByTagName("body")); } } function search(elm){ for(var i=elm.length-1;i>=0;i--){ if(elm[i].nodeName=="#text"){ var re=new RegExp(str,"g"); var ss=elm[i].nodeValue; var result = elm[i].nodeValue.indexOf(str); if(result>=0){ var result_str=ss.replace(re,"<span style=\"background:#77ff77;font-weight:bold\">"+str+"</span>"); var newElement = document.createElement("span"); newElement.innerHTML = result_str; elm[i].parentNode.replaceChild(newElement,elm[i]); } }else{ if(elm[i].hasChildNodes()){ search(elm[i].childNodes); } } } } // --> </script>
- ベストアンサー
- JavaScript
- $という文字が使えない？
フレームを使用したページで、左側フレームの文字をクリックすると、右側フレームの特定の文字が強調表示される、というJSがあります。 だいぶ以前にどこかで教えていただいたものですが、 <script language="javascript"> <!-- function change(str){ var re= new RegExp(str,"g"); var b=parent.right.document.getElementById('rbody'); var ss=b.innerHTML; b.innerHTML= ss.replace(re,"<strong>"+str+"</strong>") } //--> </script> このようにhead部分に記述しておき、文中に <a href="#koko" onclick="change(this.innerHTML)">moji</a> とします。 このmojiをクリックすると右フレームにあるmojiという文字がすべて強調されます。 ところが、$mojiとすると、右フレームの$mojiという文字が強調表示しなくなります。 原因は$という文字がJSで特殊文字だからのような気がするのですが、上記のような$を使った文字を強調させたい場合にはどのようにしたらいいでしょうか。 よろしくお願いします。
- ベストアンサー
- JavaScript
- location.hrefを使用したFRAME表示
location.hrefを使ったjavascriptを作ろうとしています。 <script type="text/javascript"><!-- location.href = "http://www.yahoo.co.jp/"; // --></script> の改良版として、http://www.yahoo.co.jp/をフレームの右側に 表示させたいと考えています。 （src使用ではなくjavascriptのlocation.hrefを使うことがMUSTです) <head> <script type="text/javascript"><!-- right.location.href = "http://www.yahoo.co.jp/"; // --></script> </head> <body> <FRAMESET cols="50%,50%"> <FRAME name="left" src="left.html"> <FRAME name="right" src="right.html"> </FRAMESET> </body> としてみましたがうまくいきません。 location.hrefはmetaタグ内でしか有効ではないにも関わらず right.の指示をメタタグ内部で指定していないことが原因かも しれません。 javascriptのlocation.hrefを使ってフレームの右側に 表示させる方法をご教授願います。
- ベストアンサー
- JavaScript
- 表示されない
すみません初心者です。 キーボードから入力された文字、およびその実行した時刻にもとづいて 「おはようございます○○さん」（5時から10時まで） 「こんにちは○○さん」（10時から18時まで） 「こんばんは○○さん」（18時から5時まで） と表示したいのですが以下のプログラム作成したところ表示されませんでした。どこかおかしいとこがあれば教えてください <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/html1-tarnsitional.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>ご挨拶</title> </head> <body> <script type="text/javascript"> //<![CDATA[ function generateGreeting(aisatsu) { var kutouten = "!"; function returnGreeting(aite) { return aisatsu + "," + aite + kutouten; } return returnGreeting; } var str; str=prompt("お名前は？",""); var today = new Date(); var todayHour = today.getHours(); if(todayHour >= 5 && todayHour < 10){ document.write("おはようございます"+str+"さん"); }else if(todayHour >= 10 && todayHour < 18){ document.write("こんにちは"+str+"さん"); }else if(todayHour >= 18 && todayHour < 5){ document.write("こんばんは"+str+"さん"); } //]]> </script> </body> </html>
- 締切済み
- JavaScript
- マウスオーバーでフレームに対応した内容を表示・・・。
こんにちは。 いつもお世話になっております。 参考にしたサイト http://www.openspc2.org/reibun/javascript/frame/003/index.html 【内容】 フレーム分割のページ等の内容は以下の通りです。 ●フレーム分割ページ <html> <head> <title>マウスオーバーで右側フレームに対応した内容を表示する</title> <frameset cols="20%,*"> <frame src="code_left.html"> <frame src="code_right.html" name="rightFrame"> </frameset> </head> </html> ●左側のページ(code_left.html) <html> <head> <title>マウスオーバーで右側フレームに対応した内容を表示する</title> <script language="JavaScript"><!-- function setFrame(jpURL) { parent.rightFrame.location.href = jpURL; } // --></script> </head> <body> <a href="#" onMouseover="setFrame('page1.html')">その１</a><br> <a href="#" onMouseover="setFrame('page2.html')">その２</a><br> </body> </html> で、意図した動きが出来たのですが、その１をクリックするとcode_left.htmlが別窓で開いてしまいます。 参考にしたサイトのサンプル画面ではこのような 動きにはならないのに、なぜ別窓が開いてしまうのか がわからないのです。 どうかご指導よろしくお願いいたします。
- ベストアンサー
- JavaScript
- 左右に分けたフレームのセンター表示は？
ありがちな左にメニュー、右にコンテンツのフレームを作っていますが、 これをセットでセンターに配置して表示することが出来ず、悩んでいます。 現在はフレームの更に左右にマージン用のフレームを配置することで、 センター表示を実現させていますが、もっと簡単な方法はありませんか？ <frameset cols="*,80,640,*"> <frame src="ダミーファイル" name="left" noresize> <frame src="メニューファイル" name="menu" noresize> <frame src="コンテンツファイル" name="body" noresize> <frame src="ダミーファイル" name="right" noresize> </frameset>
- ベストアンサー
- HTML
- エラー:書き込みができません が出てしまいます
フレーム(rightup) が表示しているURLを調べて表示させるJavaScriptを書きました。rightupの表示内容が初期状態のときは動きます。ところが、初期状態と異なるURLを表示させると以下のようなエラーが出てしまいます。 エラー：書き込みができません 以下、フレーム定義のHTML、URLを調べて表示させるJavaScriptの含まれているHTMLの抜粋を示します。 理由等お分かりの方教えていただけないでしょうか。よろしくお願いします。 フレーム定義のHTML(抜粋) <FRAMESET cols="59%,41%"> <FRAME src="left.html" name="left" id="left"> <FRAMESET rows="85%,15%"> <FRAME src="right_up.html" name="rightup" id="rightup"> <FRAME src="right_bottom.html" name="rightbottom" id="rightbottom"> </FRAMESET> <NOFRAMES> <BODY> <P>このページを表示するには、フレームをサポートしているブラウザが必要です。</P> </BODY> </NOFRAMES> </FRAMESET> JavaScriptの含まれているHTML(抜粋) <HTML> <HEAD> <META http-equiv="Content-Style-Type" content="text/css"> <TITLE></TITLE> <SCRIPT LANGUAGE = "JavaScript"> <!-- function ShowProperty() {top.rightbottom.document.write(window.top.rightup.location.href)} //--> </SCRIPT> </HEAD> <BODY> <CENTER> <FORM NAME = "fom"> <INPUT TYPE="button" value="GO" onclick=ShowProperty()> </FORM> </CENTER> <TABLE border="1" width="100%"> <TBODY> <TR><TD><A href="http://www.asahi.com" target="rightup">朝日</A></TD></TR> <TR><TD><A href="http://www.yahoo.co.jp" target="rightup">Yahoo</A></TD></TR> </TBODY> </TABLE> </BODY> </HTML>
- 締切済み
- JavaScript
- フレームページが表示できません
以下のようなフレームページを作成したのですが、mac（safari）ではきちんと表示されるのに、windows（Internet Exprorer）ではページが表示されません。 ソースをチェックしたところ、特にエラーは出ないのですが… どこが問題でしょうか？ お分かりになる方、ぜひアドバイスおねがいします。 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html lang="ja"> <head> <meta http-equiv="content-type" content="text/html;charset=Shift_JIS"> <meta name="generator" content="Adobe GoLive 6"> <title>illustration.com</title> <link href="sample.css" rel="stylesheet" media="screen"> </head> <body> <frameset cols="250,*" border="0"> <frame name="gallery-top" noresize src="gallery-index01.html" frameborder="no"> <frame name="gallery-main" noresize src="gallery-main.html" frameborder="no"> <noframes> <p></p> </noframes> </frameset> </body> </html>
- 締切済み
- その他（プログラミング・開発）
- html リンクを別フレームに表示したい
htmlでリンク先を別フレームに表示したいです。 今は、縦にフレームを２つ作っていて、本当は左側の文字をクリックしたら右側に表示されるようにしたいのですが、別枠のウィンドウが開いてしまいます。 どこがいけないのでしょうか… このページ以外で編集する必要がありますか？ http://noula.himegimi.jp/ 左枠 <html> <head> </head> <body bgcolor="#fff0f5" text="#fa8072"> <font size="2"> <a href="toppage.html" target="left">TOP</a><br> <a href="about.html" target="left">ABOUT</a><br> PROFILE<br> WHAT'S NEW<br> VOICE<br> SONG<br> BLOG<br> WORK<br> LINK<br> CONTACT</font><br> </body> </html> フレーム設定 <html> <frameset cols="10%,*" frameborder="no"> <frame name="right" src="menu.html"> <frame name="left" src="toppage.html"> </frameset> </html> よろしくお願いします
- 締切済み
- HTML
お礼
早速の回答ありがとうございます 上のようにやってみたのですが、index.htmlを開いたところフレームすら表示されなくなってしまいました（汗 right.htmlも「left_1.html left_2.html left_3.html」と横に表示されるだけです 大変申し訳ないのですが、もう少し教えて頂いてもよろしいでしょうか 宜しくお願い致します
補足
right.htmlは自分のミスでした（汗 index.htmlは相変わらず何も表示されないんですよね・・・ ほんとすみません