フレーム分割による表の表示方法についての質問
- JavaScriptを使用して、画面を左右にフレームで分割し、左フレームのリストボックスから要素を選択すると、右フレームに該当した表が表示される方法について教えてください。
- 質問者が作成したプログラムでは、右と左のフレーム両方に表が出力されてしまいます。しかし、予想では特定の場所に<DIV>タグを追加することで、右フレームだけに表を表示することができました。なぜこのような結果になったのかが分かりません。
- 質問者は期待通りの動作ができるように、特定の場所に<DIV>タグを追加しました。しかし、なぜこの追加が必要なのかが分からない状況です。教えてください。
- ベストアンサー
<DIV id=""></DIV>勘でいれたら・・・
はじめまして。JavaScript初めてです。 わからないことがあるので、教えてください。 画面を左右にフレームで分割して、左フレームのリストボックスから要素を選択すると、その要素に該当した表が右フレームに表示される、というものを作成しました。 左フレーム：name = index 右フレーム：name = main こんな感じ(左フレーム)↓ <HTML> <HEAD> <SCRIPT language="JavaScript"> <!-- function disp(obj){ 右フレームの表のHTML作成をしている parent.main.document.open(); parent.main.document.write (desc.innerHtml = 上で作成したHTML); parent.main.document.close(); } --> </SCRIPT> </HEAD> <BODY onload="disp(form)"> ※<DIV id="desc"></DIV> <FORM name="form"> <SELECT name="MListBox" onchange="disp(form)"> <xsl: apply-templates select="～"/> </SELECT> </FORM> ＊<DIV id="desc"></DIV> </BODY> </HTML> ・ ・ <xsl文章> ・ 初めは、※←のところがなく、右と左のフレーム両方に表が出力されてしまっていました。でも※←のところに<DIV id="desc"></DIV>を勘で入れたとたん、右フレームだけに表が出力されるようになりました。（期待の結果） 自分の予想では、＊←のところのみで期待の結果が得られる予定で、（disp()でHTMLの出力を右フレームに指定しているから）何故※のところを追加したことで期待通りの動きをしたのかが謎です。 わかりづらい説明で申し訳ないですが、教えてくださる方がいらっしゃいましたら、どうぞお願いします。
- kanan999
- お礼率100% (2/2)
- JavaScript
- 回答数1
- ありがとう数2
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
- ベストアンサー
質問文にあるソースで目指しているものがいまいち掴み切れていないかも知れないので、見当違いなことを書くかもしれませんが… <DIV id="desc"></DIV> を複数記述する事で意図した結果になったということですが、それはおそらく記述エラーが元でそうなっているのだと思います。 id名は、各HTML文書内で固有の名前を与える属性として扱われます。 平たく言えば、一つのHTMLファイル内で、一つの要素に与えたid名はその一回しか使えません。 ですので、特定の要素で既に使われているid名を、それとは別の要素に対して与える事が許されていません。 ご質問文のソースの場合、一つのHTML文書内で同じid名が複数の要素に与えられる事になり、一つの特定の要素を絞り込むことができなくなっています。 おそらくは、JavaScriptが特定のid名を持つ一つの要素を取り出そうとし、同じid名を持つ要素が複数あるために特定の要素を識別するのに失敗したせいで、左のフレームに表示されるはずのスクリプトで生成したHTMLソースが、表示先を見失って表示されなくなっているだけだと思われます。(なぜエラーメッセージが出ないのかについては、IEの動作上の問題と言う事になるのではないでしょうか) 試しに、※の部分の<DIV id="desc"></DIV>を残して、＊の部分の<DIV id="desc"></DIV>を消し、動作させてみてください。 それで元のように右フレームにだけ表示させたかったHTMLが左フレームにも表示されるようでしたら、一見期待通りの動きになった原因は、上記のように同じid名を複数の要素に与えたという記述ミスと、それから生じたスクリプトの動作不良と言う事になると思います。 ソース的にスマートに目的の動作を確保するのであれば、<DIV id="desc"></DIV>を複数記述するのではなく、スクリプト内の parent.main.document.open(); parent.main.document.write(desc.innerHtml = 上で作成したHTML); parent.main.document.close(); この部分の記述を parent.main.document.open(); parent.main.document.write(上で作成したHTML); parent.main.document.close(); に直すのが良いと思います。 フレームmainにだけ、スクリプトで生成したHTMLを表示するということが狙いだったのであれば、それまで意図通りの動作をしなかったのは、parent.main.document.write()の中で、「desc.innerHTML =」という記述をしているために、「上で生成したHTML」を、右フレーム内に書き出すのと同時に、descというidを持つ要素(＊の<DIV id="desc"></DIV>)の中のHTMLソースとして再定義していたためと思われます。 スクリプトを上のように修正すれば、HTMLソースの書式違反による動作不良ではなく、スクリプトの正常な動作で、右フレームにだけスクリプトで生成したHTMLソースを表示させるという結果を得られると思います。 参考になれば。 見当違いでしたら、ごめんなさい。
関連するQ&A
- 右フレームのテキストに、値を入れ込む
左20％・右80％と言うようにフレームを切ってあります。 左のフレームにボタンがありまして、それを押すとJavaScript が動き出し、右のフレームにあるテキストのValueに「AAA」と 入れ込みたいんです。 ブランクが空いてしまったため、やり方を忘れてしまったようです。 一応下記のやり方でよかったような気がしたんですが、でも出来な いので当然間違っています。 function Text(){ parent.main.window.document.Myform.txt1.value = "AAA"; } お手数ですがよろしくお願いします。
- ベストアンサー
- JavaScript
- Formの値を別のフレームで使いたい
上下分割のフレームのうち、上のフレームの <FORM NAME="BForm"> RGB値を入れる＞ 1番目の色：<INPUT TYPE="text" NAME="Bpt1" VALUE="" SIZE="8"> 2番目の色：<INPUT TYPE="text" NAME="Bpt2" VALUE="" SIZE="8"> <INPUT TYPE="button" VALUE="CL" NAME="CL" onClick="CL()" tabindex="6"> </FORM> でテキストボックスに入れた数字を使って 下のフレーム(komado3)を書き変えたいのですが。 <SCRIPT LANGUAGE="JavaScript"> <!-- function CL(){ B1V=document.BForm.Bpt1.value; B2V=document.BForm.Bpt2.value; parent.komado3.document.open(); parent.komado3.document.write('<HTML><HEAD>'); parent.komado3.document.write('<STYLE TYPE="text/css">'); parent.komado3.document.write('<!--'); parent.komado3.document.write('.pt1{color:'+B1V+'}'); parent.komado3.document.write('.pt2{color:'+B2V+'}'); parent.komado3.document.write('-->'); parent.komado3.document.write('<'+'/STYLE><'+'/HEAD><BODY>'); parent.komado3.document.write('<SPAN CLASS='+pt1+'>1番目の色は'+B1V+'です<'+'/SPAN>'); parent.komado3.document.write('<SPAN CLASS='+pt2+'>2番目の色は'+B2V+'です<'+'/SPAN>'); parent.komado3.document.write('</'+'BODY><'+'/HTML>'); parent.komado3.document.close(); } //--> </SCRIPT> これだとうまく行かないのですが、どこがおかしいのか教えてください。
- ベストアンサー
- JavaScript
- JavaScriptから別フレームのasp出力ドキュメントにアクセスできません。
まず以下のソースをご覧ください。 [index.html] <html> <frameset cols=50%,*> <frame src="frame01.html"> <frame src="frame02.asp"> </frameset> </html> [frame01.html] <html> <head> <script type="text/javascript"> <!-- function insertText(){ parent.frames[1].document.myform.mytext.value = "テスト"; } // --> </script> </head> <body> <form> <input type="button" value="出力" onclick="insertText()"> </form> </body> </html> [frame02.aspにより出力されたソース内の記述] <html> <head> </head> <body> <form name="myform"> <input type="text" name="mytext"> </form> </body> </html> frames[0]のボタンを押すとframes[1]のテキストフォームに"テスト"が出力されるようにしています。 frame02.aspが静的なHTMLだった場合は問題なく動作するのですが、aspによって出力されたhtmlではエラーになってしまいます。 これはフォームに対する操作だけでなく、document.write()等のあらゆる操作に該当します。 当方はaspのことは全くわからず、またこのaspの中身を書き換える権限もありません。あくまで出力された結果に対して動的に操作を加えたいのです。 原因としては次のようなものを考えました。 ・aspドキュメントのパスに対してアクセス権限が無い。 ・aspもしくはCGIの実行によってもたらされたHTMLに対してはスクリプトは動作しない。 ・実際の出力結果のヘッダにはJavaScriptが記述されており、これが何らかの影響を及ぼしている。 ・事前にスクリプトから操作を受けないようにプロテクトされている。 ご助力を願えれば幸いです。
- ベストアンサー
- JavaScript
- XML,XSL,JavaScriptの連携
はじめまして。XML初心者です。 教えていただきたいことがあります。 今、XSLを解析しているのですが、おそらくこのようなことをやっているのだと考えます。↓ XSLでXMLのデータを読み込み、そのデータを元にリストボックスを作成して、JavaScriptでリストボックスで選択された要素の座標位置などを表形式で出力していると思うのですが、これは１画面中でやっています。 これを左右のフレームでわけて、左フレームにリストボックス、右フレームにリストボックスで選択された要素の座標位置などの表を出力したい、と思っています。 上記を実現させるためには、左フレームで選択したリストボックスがどの要素を指しているのか？を右のフレームに伝えなければならないと考えますが、どのようにしたらよいのかわかりませんし、なにから手をつけていけばよいかもわかりません。 このようなことを実現することは可能でしょうか？ わかりづらい説明で申し訳ありませんが、アドバイスをいただけたらと思います。 よろしくおねがいします。
- ベストアンサー
- XML
- 違うフレームにあるフォームをsubmit（送信）
JavaScriptかPHPかでも質問なのですが、Mainフレームには送信ボタンはありませんし、出来ない（しない）ものとします。 かわりにSubフレームが読み込まれたときにJavascriptでMainフレームのMainFormフォームをSubmitさせるような記述は出来ますでしょうか？ その後PHPの変数でデータを操作しようと思っているのですが、PHPでデータを受け取れません。 要は、Javascriptを使わなくてもいいのですが、PHPで他のフレームにあるフォーム内のデータを受け取りたいのです。 どなたか助けてください。 ★★★★★★★★★Mainフレーム★★★★★★★★★ <form name="MainForm" action="Sub.php" target="Sub" method="post"> <input name="ABC" type="text"> </form> ★★★★★★★★★Subフレーム★★★★★★★★★★ －－－－－JavaScript部－－－－－－－ parent.Main.document.MainForm.submit(); －－－－－PHP部－－－－－－－ <?php extract($_POST); global $ABC; echo $ABC; ?>
- ベストアンサー
- PHP
- xml+xslでの変換内容をtextareaへ
お世話になります。 xml+xslでhtmlに変換する際、その変換内容をtextareaにも表示させるようにしたいのです。 使用ブラウザ：FireFox。現状はFirebugでDOMツリーを手動で参照してる状況です。 現在は、ノードをtextareaに表示しようとすると[object DocumentFragment]とだけ出てしまい、DocumentFragmentという概念あることは分かり、色々調べcreateElement()やcreateTextNode()など、その他思いつく限りの事でテストしてみてるのですが、どうにもノードをHTMLタグとしてtextareaに表示させる事が出来ません。 以下にポイントとなるソースを掲示しますので、どなた様か、お助け願えませんでしょうか --test.html---- <html><head> <meta content="text/html; charset=utf8" http-equiv="content-type"> <title>JS+xslt</title> <script type="text/javascript"> function tramsformlists(xmlFile, xslFile, resultNodeID){ var xml, xslt, newDoc; if(document.all){ xml = new ActiveXObject("Microsoft.XMLDOM"); xslt = new ActiveXObject("Microsoft.XMLDOM"); }else { xml = document.implementation.createDocument("", "", null); xslt = document.implementation.createDocument("", "", null); } xml.async = false; xslt.async = false; xml.load(xmlFile); xslt.load(xslFile); if(document.all){ document.getElementById(resultNodeID).innerHTML = xml.transformNode(xslt); }else { var xsltp = new XSLTProcessor(); xsltp.importStylesheet(xslt); newDoc = xsltp.transformToFragment(xml, window.document); var df = document.createDocumentFragment(); cloneDoc= newDoc.cloneNode(true); document.getElementById("Div"+resultNodeID).innerHTML = ""; document.getElementById("Div"+resultNodeID).appendChild(newDoc); t = document.msg_form.TextareaTest.value; document.msg_form.TextareaTest.value =t + df.appendChild(cloneDoc); } } </script> </head><body> <form name="msg_form"> <ul> <li> <input type="button" value="Menu" onclick="tramsformlists('test0.xml','test0.xsl','Test')"><br> <div id="DivTest"></div> <textarea cols="50" rows="10" id="TextareaTest">あああああああ</textarea> </li> </ul> </form> </body></html> --test0.xml-- <?xml version="1.0" encoding="utf-8"?> <root> <nolink_logo> </nolink_logo> </root> --test0.xsl-- <?xml version="1.0" encoding="utf-8"?> <xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform"> <xsl:output method="html" encoding="utf-8"/> <xsl:template match="root"> <xsl:apply-templates select="nolink_logo"/> </xsl:template> <xsl:template match="nolink_logo"> <xsl:call-template name="Test" /> </xsl:template> <xsl:template name="Test"> <xsl:variable name="menu" select="document('test1.xml')/root"/> <div>画像を表示 <xsl:for-each select="$menu"> <xsl:element name="a"> <xsl:attribute name="href"> <xsl:value-of select="url[1]"/> </xsl:attribute> <xsl:attribute name="target">_blank</xsl:attribute> <xsl:element name="img"> <xsl:attribute name="src"> <xsl:value-of select="img[1]"/> </xsl:attribute> </xsl:element> </xsl:element> </xsl:for-each> </div> </xsl:template> </xsl:stylesheet> --test1.xml-- <?xml version="1.0" encoding="utf-8"?> <root> <img>http://domain/image2.gif</img> <url>http://domain/test.html</url> </root>
- ベストアンサー
- JavaScript
- Perl内でのフレームリンク
始めまして、こんばんは。 早速ですが本題に入ります。 Perlでのフレームリンクなのですが 画面を三分割(Main(左),Menu(右),Out(下))とし MenuフレームからFormでMainとOutフレームにリンクさせたいのですが なかなか思うように行きません。 ここの過去ログにも似たような内容があったのですが 応用しても不可能だったり、Googleで検索してもなかったりと 努力はさせていただきました。 MenuのFormで送る内容なのですが Mainへは ・./main.cgi ・input hidden name=mode value=Main Outへは ・./out.cgi ・input hidden name=mode value=messege となります。 どうぞ、よろしくお願い致します。
- 締切済み
- JavaScript
- div入れ子、親でmarginを設定すると子のmarginは反映されない？
段組みレイアウトでdivが 入れ子になってています。 外側が <div id=wrap> <div id=main> <div id=form> </div> </div> </div> #wrap{ width: 840px; margin-top: 0px; margin-right: auto; margin-bottom: 15px; margin-left: auto; } #main { width: 582px; float: right; padding: 0; margin-top: 0; margin-right: 0; margin-bottom: 0; margin-left: 10; } #form { width: 562px; padding: 0; margin-top: 0; margin-right: 0; margin-bottom: 0; margin-left: 20; } としてあります。 id=formのmargin-left :20; だけがブラウザで反映されず、 flort:right;で右に寄せて左に20pxあけました。 id=mainもflort:right;で右に寄っているだけだったようです。 divを入れ子に使う場合、 親でmarginを設定したら、子のmarginは反映されないのでしょうか？
- ベストアンサー
- HTML
- 別フレームのテキストボックスに説明表示
フレームを使ってHPを作っていますが、 どうにもできないところがあり困っています。 左右に分割していて、 左フレーム name="menu" 右フレーム name="main" で、左フレーム内のリンクをオンマウスすることで、 右フレームのテキストボックス name="readme" に説明文を表示させたいのです。 どなたか教えていただけませんでしょうか？
- ベストアンサー
- HTML
- 複数のプルダウンメニューの設置（左右フレーム）
前回プルダウンメニューによる左右フレーム切り替えの質問をさせていただきました。 →http://oshiete1.goo.ne.jp/kotaeru.php3?q=1200405 申し訳ないですが、ここからまた新たに質問させてください。 上部(固定)、左フレーム(プルダウン設置)、右フレーム（メインページ）というページを作っています。 現在の状況はローカルのフォルダの中に ○上フレーム：flame1.htm（完成） ○左フレーム：flame2.htm（←ここに設置したい） ○右メインページ：1.htm 2.htm 3.htm（←１つ目プルダウン）4.htm 5.htm 6.htm（←２つ目のプルダウン） 7.htm 8.htm 9.htm（←３つ目のプルダウン） と入っている感じです。 <HEAD>～<HEAD>部分 <script language="JavaScript"><!-- function myGo(){ mySelect = document.myForm.myMenu.selectedIndex; parent.main.location.href = document.myForm.myMenu.options[mySelect].value; } // --></script> <BODY>～<BODY>部分 <form name="myForm"> <select name="myMenu" onChange="myGo()"> <option value="1.htm" >第1章 <option value="2.htm" >第2章 <option value="3.htm" >第3章 </select> </form> ↑上記でひとつのプルダウンは設置できるのですが、 ２つ目、３つ目のプルダウンの設置となると、 どこをどうしたらよいやらわかりません。 是非ご回答よろしくお願いいたします。
- ベストアンサー
- JavaScript
お礼
お返事ありがとうございました。 粗末な説明で正確なアドバイスをいただき感謝しています。 上記にあります通り、＊の部分を消去し、動作させましたところ、左右両フレームにおいてHTML文章が実行されてしまいましたので、スクリプト内の記述を変更しましたところ、意図した結果となりました。 勉強になりました。本当にありがとうございました。