- ベストアンサー
別ページのインラインフレームに表示させる方法
- 別ページのインラインフレームに表示させる方法について教えてください。
- Aページのツリーをクリックした際にBページのインラインフレームに表示させる方法を教えてください。
- 高望みかもしれませんが、お力をお貸しください。
- yako_k
- お礼率77% (62/80)
- JavaScript
- 回答数2
- ありがとう数2
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
ちょっと質問が分かりづらいのですが、 質問で書かれたAページと同じようなメニューを持ったBページ(以下 B.html とします)があり、 Aページ内のリンククリックで、 ・B.html に飛んだ後 ・bb.html のメニューツリーを展開させた上で、 ・B.html 内のインラインフレームに bb.html を表示させたい ということでしょうか? そうだとしたら、B.html に、JavaScriptで以下のようなコードを組めばいけるでしょう。 (B.html内で開くべきページを、アンカーで指定するようにしました) ポイントは3点 1. Aページの方では、"B.html#menu22"といったアンカー付きのリンクを張っておく 2. Bページのメニュー内では、Aタグにidを振ることで、どのメニューを開きたいのは指示できるようにする 3. body に onload イベントを指定し、onload 時に、アンカーを元に「メニューの展開」「インラインフレームに読み込み」を行うようにする 試しに、下記B.html ファイルを作って、 それをブラウザで開いた状態から、 アドレスバーを「B.html#menu22」としてアクセスしてみてください。 アンカー「menu22」情報を元に、menu2を開いて、frameにbb.htmlを読み込みます。 ---B.html ここから--- <body onload="load();"> <script type="text/javascript"> <!-- function tree2(menu_class,menu_id) { var div=document.getElementById(menu_id); if (div.style.display == "block") div.style.display="none"; else { var sib=div.parentNode.childNodes; for (var i=0; i < sib.length; i++) if (sib[i].className == menu_class) sib[i].style.display="none"; div.style.display="block"; } } function load() { var hash = location.hash.slice(1); var elem = document.getElementById(hash); if (elem) { frames.frame.location = elem.getAttribute("href"); while (elem && elem.nodeName != "DIV") { elem = elem.parentNode; } if (elem) { elem.style.display = "none"; tree2(elem.getAttribute("class"), elem.getAttribute("id")); } } } // --></script> <style type="text/css"> <!-- .tree { display:none; } --></style> <p><a href="javascript:tree2('tree','menu1');" title="展開">展開</a></p> <div class="tree" id="menu1"> <ul> <li><a href="A.html#menu11" title="あ">あ</a></li> <li><a href="A.html#menu12" title="ああ">ああ</a></li> </ul> </div> <p><a href="javascript:tree2('tree','menu2');" title="展開">展開</a></p> <div class="tree" id="menu2"> <ul> <li><a href="b.html" title="い" target="frame" id="menu21">い</a></li> <li><a href="bb.html" title="いい" target="frame" id="menu22">いい</a></li> </ul> </div> <iframe name="frame" width=100 height=100> </iframe> </body> ---B.html ここまで---
その他の回答 (1)
- fujillin
- ベストアンサー率61% (1594/2576)
AページとBページの関係が不明ですが、単純に別ウィンドウ、別フレームを操作するだけなので可能です。（いくつかの制限がありますが） 以下あたりをご参考に。 http://homepage2.nifty.com/BASH/WWW/JavaScript/anotherpage.html http://www.tagindex.com/javascript/window/main_to_sub1.html http://www.tagindex.com/javascript/window/sub_to_main.html http://www.tagindex.com/javascript/page/color2.html http://himajin.moo.jp/javascript/iframe/index.html http://usagi-js.com/sample/jssample5.htm ＞かつツリーが展開しているというような動作は可能でしょうか。 ご提示のものだと、リンクをクリックしてもツリーが閉じることはないので、表示の処理を付け加えるだけでよろしいかと。 ついでに… ご提示のソースが一部分だけなのかも知れませんが、 for (var i=0; i < sib.length; i++) if (sib[i].className == menu_class) sib[i].style.display="none"; で行なっている内容の意味が不明です。（少なくともご提示の内容だけなら不要）
お礼
お礼が遅くなり、申し訳ありません。 ご回答ありがとうございました。 無事に希望通りの仕様が叶いました。 今後ともよろしくお願いします。
お礼
お礼が遅くなり、申し訳ありません。 ご回答ありがとうございました。 無事に希望通りの仕様が叶いました。 今後ともよろしくお願いします。