重要なお知らせ

「教えて! goo」は2025年9月17日(水)をもちまして、サービスを終了いたします。詳細はこちら＞

電子書籍の厳選無料作品が豊富！

別ページのインラインフレームに表示させる方法

解決済

  • 質問者：yako_k
  • 質問日時：
  • 回答数：2件

別ページのインラインフレームに表示させる方法

こんにちは。いつもお世話になっております。
数日前に自閉式ツリーについて質問させていただきました。
ありがとうございました。
http://oshiete.goo.ne.jp/qa/5526156.html
---------------------------------------------------------------
<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";
}
}
// --></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" title="あ" target="frame">あ</a></li>
<li><a href="aa.html" title="ああ" target="frame">ああ</a></li>
</ul>
</div>
---------------------------------------------------------------
【参考ページ】http://amenti.usamimi.info/treemenu2.html

というふうに作っているのですが、たとえばAページの上記ツリーをクリックした際に内容がBﾍﾟｰｼﾞのインラインフレームframeに表示され、かつツリーが展開しているというような動作は可能でしょうか。

いろいろと高望みをしているとは思いますが、できればお力をお貸しください。
よろしくお願いします。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

A 回答 (2件)

No.2ベストアンサー

  • 回答者： mtaka2
  • 回答日時：

ちょっと質問が分かりづらいのですが、


質問で書かれた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 ここまで---
    • good
    • 0
    • 件
通報する
この回答へのお礼

お礼が遅くなり、申し訳ありません。
ご回答ありがとうございました。
無事に希望通りの仕様が叶いました。
今後ともよろしくお願いします。

通報する
お礼日時：2010/04/25 10:16

No.1

  • 回答者： fujillin
  • 回答日時：

AページとBページの関係が不明ですが、単純に別ウィンドウ、別フレームを操作するだけなので可能です。

（いくつかの制限がありますが）

以下あたりをご参考に。
http://homepage2.nifty.com/BASH/WWW/JavaScript/a …
http://www.tagindex.com/javascript/window/main_t …
http://www.tagindex.com/javascript/window/sub_to …
http://www.tagindex.com/javascript/page/color2.h …
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";
で行なっている内容の意味が不明です。（少なくともご提示の内容だけなら不要）
    • good
    • 0
    • 件
通報する
この回答へのお礼

お礼が遅くなり、申し訳ありません。
ご回答ありがとうございました。
無事に希望通りの仕様が叶いました。
今後ともよろしくお願いします。

通報する
お礼日時：2010/04/25 10:16

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

Q質問する（無料）

ページトップページトップ

Q質問する（無料）

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報