別ページのインラインフレームに表示させる方法
こんにちは。いつもお世話になっております。
数日前に自閉式ツリーについて質問させていただきました。
ありがとうございました。
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に表示され、かつツリーが展開しているというような動作は可能でしょうか。
いろいろと高望みをしているとは思いますが、できればお力をお貸しください。
よろしくお願いします。
No.1
- 回答日時:
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";
で行なっている内容の意味が不明です。(少なくともご提示の内容だけなら不要)
お礼が遅くなり、申し訳ありません。
ご回答ありがとうございました。
無事に希望通りの仕様が叶いました。
今後ともよろしくお願いします。
No.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 ここまで---
お礼が遅くなり、申し訳ありません。
ご回答ありがとうございました。
無事に希望通りの仕様が叶いました。
今後ともよろしくお願いします。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- HTML・CSS 書籍を見つつサイト造りの練習をしているのですが、見た目が一致しません 2 2022/11/28 15:00
- HTML・CSS アコーディオンメニューが思うように動作しません。 1 2023/08/20 16:48
- HTML・CSS CSS のみのタブ切り替えについて 1 2023/01/11 16:47
- HTML・CSS テキストを画面の真ん中に配置したいです。 2 2022/11/25 16:11
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/07 21:04
- HTML・CSS HTML & CSS 縦ボックス内の文字の左右センタリング 3 2023/03/25 04:23
- JavaScript jqueryを使ったスムーススクロールのコードを書いたのですが、HTMLコード内にある、a butt 2 2022/04/14 10:59
- JavaScript 入力フォームの javascript で メールアドレスの正規チェックをを行い、ボタンをクリックして 2 2022/04/27 16:06
- HTML・CSS ヘッダーの画像にメインエリアがかぶってしまいます 1 2022/11/28 14:06
- HTML・CSS ボタンをクリックした時に、入力フォームのすぐ下部に、「入力欄が空白です」というテキストメッセージが表 1 2022/04/27 16:25
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
文字と数字が混在する要素のsor...
-
ホームページビルダー15 メニュ...
-
プルダウンメニュー連動後の処...
-
jqueryアコーディオンのマウス...
-
JQueryで、liタグの背景に色を...
-
ツリーメニューについて
-
jqueryプルダウンメニュー個別着色
-
javascript テキストエリアを1...
-
MAX関数を使ってからLEFT JOIN...
-
htmlの記述で link rel=styles...
-
画像の上に画像リンクを貼る方法
-
スライダーを実装した場合、ペ...
-
背景色を一定時間ごとにランダ...
-
文字を固定したいのですが…
-
javascriptでURLにマウスオーバー
-
[急ぎ] videoタグで埋め込んだm...
-
離れた場所にマウスオーバーで...
-
c++std::string型をTCHARに変換...
-
タブで開いてさらにタブ内をア...
-
1行で左寄せと右寄せと中央揃え...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
jqueryのsortableで一部ソート...
-
javascriptでEnterキーをtabキ...
-
クリックした<a>タグのみにClas...
-
チェックボックスに入っている...
-
【javascript で動的に a タグ...
-
jquery ドロップダウンメニュー...
-
「jQuery」アコーディオンメニ...
-
jQueryで、リンクURLの一致を確...
-
jQueryのeqで最後からn番目以降...
-
ネストされたチェックボックス...
-
javascriptで、クリックしたら...
-
onmouseoverの表示切り替えが上...
-
文字と数字が混在する要素のsor...
-
jQueryでネスト構造の<li>がク...
-
タブメニューを上下に設置
-
<li></li>の数を制限
-
jQuery多層式アコーディオンメ...
-
どの<li><a> が押されたか判別...
-
CSSとJavaScriptを使ってドロッ...
-
複数の画像をランダム(シャッ...
おすすめ情報