インラインフレームを使ったページ間のリンク方法
- インラインフレームを使ったページ間のリンク方法について説明します。
- インラインフレームを指定しているページにリンクする際に、特定のページを最初に表示させる方法について知りたいです。
- インラインフレームを使用したウェブページにおいて、異なるページをリンクする際に特定のページを最初に表示させたいです。
- ベストアンサー
インラインフレーム（リンクについて）
メモ帳を使って、タグ打ちでHPを製作しています。 インラインフレームを使っているページにリンクする際に、下のようなことがしたいのですが、方法が分かりません。 インラインフレームを指定しているページを【A】とします。 【A】内に<a href=>タグでインラインフレームにターゲットを指定し、ページ【B】と【C】を表示させます。 【A】では<iframe src=>タグでページ【B】を指定します。 他ページからページ【A】に行くと、はじめには【B】が表示されると思います。 ここで、他ページからページ【A】に移動する際に、始めに【A】内にページ【C】を表示させたいのです。 普段はもちろん、ページ【B】を表示させるのですが、例外として【C】を表示させたいのです。 説明が難しいのですが、不足点や補足が必要でしたら追記します。 よろしくお願いします。
- juniorjunior
- お礼率68% (215/316)
- HTML
- 回答数2
- ありがとう数1
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
大きく分けて３つやりかたがあります (1)引数でわたしてやる (2)cookieで渡して (3)専用ページをつくる それぞれ(1)(2)はJavascriptかPHP(CGI)でやります。 (3)はhtmlだけでできます。 例えば引数で渡してjavascriptでやるとすると （手抜きですのでソースはきたないですが） //0.htm <a href="1.htm">2</a> <a href="1.htm?3">3</a> //1.htm <html> <head> <script language=javascript> function start(){ if(document.location.search=="?3"){ if0.location.href="3.htm" } } </script> </head> <body onload="start()"> <a href="2.htm" target="if0">2</a><br> <a href="3.htm" target="if0">3</a><br> <hr> <iframe SRC="2.htm" name="if0"></iframe> </body> </html> という感じ。 cookieやphpでやる・・・といっても今の質問者の レベルではわからないと推測されますので、 これは割愛します。 ホントはphpなどの方がスマートできれいなやり方 なんですけど・・・。 (3)htmlだけでやる場合は0.htmからのリンクを 1-2.htmと1-3.htmにわけて、1-2では初期2.htmを 1-3では3.htmを呼ぶようにしておけばよいです。 メンテは面倒ですが、環境に左右されにくいので 面倒なときはこれもありだと思います。
その他の回答 (1)
- yambejp
- ベストアンサー率51% (3827/7415)
どういう場合がBでどういう場合がCですか？ 今は両方他のページからAにきたときとしか書いて いないので、場合分けができていません。 不可能ではないと思うので、もう一度冷静に 場合分けを考えてみてください。 なおやり方としてはJavascript、PHP、CGIなどが 考えられます。どれか指定した方がより適切な 回答がつきやすいと思います。
補足
BとCは位置的には同じものです。 例 「日本語の勉強」HPをつくるとします。 インデックスページがあって、そこから「日本語の書き方」というページに移動できるよう、リンクを張ります。 ここでは「日本語の書き方」ページが【A】にあたります。 その「日本語の書き方」ページ内にインラインフレーム"nihongo"を配置、 そして「ひらがな」と「カタカナ」というリンク<a href=ひらがな.html target="nihongo><a href=カタカナ.html target="nihongo">も同時に配置します。 「ひらがな」「かたかな」ページが上での【B】【C】です。 そして、インラインフレーム"nihongo"は<iframe src=ひらがな.html>で設定します。 そうすると、「日本語の書き方」ページでは、「ひらがな」「かたかな」のリンクボタンと、インラインフレーム枠内に「ひらがな」のページが表示されると思います。 インデックスページから「日本語の書き方」に移ってきた場合、まず「ひらがな」がフレーム内に表示されますが、 インデックスページからでも「ひらがな」と「カタカナ」を選んで「日本語の書き方」ページに行けるようにしたいのです。 逆に分かりにくくなってしまったでしょうか・・・
関連するQ&A
- インラインフレームのみをスクロールさせるリンクの張り方
aaa.htmlページ内にインラインフレームでbbb.htmlというページを表示しています。 aaa.htmlのリンクから、bbb.html内の指定した箇所を自動スクロールさせ表示させたいのですが、aaa.html自体もスクロールしてしまって困っています。aaa.html自体はスクロールせず、インラインフレーム内のbbb.htmlだけスクロールさせたいのですが、どうしたらよいのでしょう。 現在の設定： ○aaa.html <a href="bbb.html#ccc" target="inline">リンク</a> <iframe src="bbb.html" name="inline"></iframe> ○bbb.html <span id="ccc">ここを表示させたい</span>
- ベストアンサー
- HTML
- インラインフレームでのクッキーについて
インラインフレームをサイトで使用しているのですが、 インラインフレームって、更新を押すと、最初に指定したページ <iframe src=a.html></iframe> だと a.html に戻ってしまうじゃないですか。 それをクッキーを使用して、更新を押しても現在見ているページを表示したいのですが。（クッキーでできるのかな？） できますでしょうか？教えてください。 また、別の方法でも、上記が可能ならば、教えてください。お願いします。 iframe名を、fffff IDを、fffffid iframeをおくページを、index.html iframeで最初に表示されるページを、a.html リンクでiframe内に表示されるページを、b.html としておきます。
- ベストアンサー
- JavaScript
- インラインフレームのアンカーリンク
Aページに２つのiframe（BページとCページ）を組み込んでいます。 Aページを開いている状態で、iframeのBページの画像をクリックし、 同じくiframeのCページの特定(アンカー)ヶ所を表示させたいのですが、 Bページ <a href="Cページ.html#01" target="frame1">～</a> Cページ <a name="01">～</a> では、うまく作動しません。 スプリクト使用でもかまいませんので、ご存知の方がいらっしゃれば 是非教えて下さい。 イメージとしては、 ┏━━━━━━━━━━━━━━━━━ ┃A.html ┃┌───┐┌────────── ┃│B.html ││C.html ┃│ ││ ┃│ ││ ┃│ ││ ┃│ ││ こんな感じで、Ｂにサムネイル画像があり、クリックで その詳細がＣページに表示されるような感じです。 （ちなみにＢスクロールあり、Ｃスクロールなし、アンカーリンクで表示位置が変わる。） よろしくおねがいします。
- 締切済み
- HTML
- HTMLアプリでインラインフレーム間リンクの表示
HTMLアプリケーション(hta)で インラインフレームにリンクボタンを置き、 別のインラインフレームにリンク先を表示する ことができるか教えてください。 ※IE6を使用しています。 HTMLタグを書くと、フレーム内のリンクをクリックすると 別ウィンドウが開いてしまいます。 ただし、フレーム外のリンクであればリンク先の表示ができます。 また、拡張子をhtmに変更すればすべて想定通りの動作をします。 記述に誤り、もしくは良い方法があれば、教えていただけませんでしょうか。 よろしくお願いします。 ------------ aaa.hta <a href="http://www.yahoo.co.jp" target=iframe2>aaa</a> <iframe name="iframe1" src="a_1.htm"></iframe> <iframe name="iframe2" src=#></iframe> a_1.htm <a href="http://www.yahoo.co.jp/" target="iframe2">click!</a> ------------
- ベストアンサー
- HTML
- 一つのリンク（ボタン）での2つのリンク要素をもたす
インラインフレームにリンク表示とページトップにあるインラインフレームへの リンクの2つのリンク要素をもたしたいのですが… 今、<a href="http://store.apple.com/jp" target="00iframe">として 00iframeにはApple Storeが反映されているんですが、 00iframeがページの上部で リンクテキストがページの下の方にあるので、 できれば＜a href="http://store.apple.com/jp" target="00iframe">この動きと、 < a href="#top">が一緒にできる方法はないでしょうか・・・ よろしくお願い致します。
- 締切済み
- JavaScript
- インラインフレーム内でリンク移動
親ページ内のインラインフレームに表示したページで、リンク移動をしたいと考えています。 親ページはインラインフレームのみ ※楽●のカテゴリーページのため親ページにJavascriptなどはつけることができません。 インラインフレーム内の表示ページで、 例えば<a href="#sale">セール</a>とリンクを付け、そのインラインフレーム内のページの(id=sale)セールの項目へ移動させたいと考えています。 当初jQueryページ内移動、 http://web-park.org/javascript/scroll100126.html 上記サイトのコードを使用して試しましたが、インラインフレーム内ではだめでした。 何か上記のサイトのコードを変えればうまくいきそうな気もしましたが初心者なのでだめでした。 jQueryは使わず最も一般的な<a href="#sale">セール</a>⇒id=saleに変えましたが、こちらもインラインフレームではうまくいきません。 なんとかインラインフレーム内に表示するページのコードでリンク移動ができないものでしょうか？ ご存知の方ぜひご教授お願いいたします。
- ベストアンサー
- HTML
- インラインフレーム切り替え＆アンカーについて
インラインフレームを切り替える際、 iframeにnameを設定して、aタグにtargetで指定すれば切り替わる ことまでは突き止めたのですが、 切り替えをしたい画像ボタンと、 iframeが離れているので、 まず、iframeがある部分までアンカーで飛び、 かつ、iframe内も同時に切り替える方法を知りたいのですが、 もしご存知の方がいらっしゃったらご教示いただければ幸いです。 よろしくお願いいたします。
- ベストアンサー
- HTML
- インラインフレームからのリンクで困っています
ホームページビルダー７を使っています。 インラインフレームを利用して画面左側にメニューアイコンを置いて 右側にリンク先のページを表示といった風にしたいです。 新しいページ（仮にＡとします）の左側にＢというインラインフレームを挿入し、そこからメインページへのリンクを挿入。 リンク先のメインページをＢではなくＢの表示を残したまま間その隣に表示したいです。 『target』はインラインフレームを挿入した『Ａ』とすると新しいウィンドウが表示されてしまいます。 新しいウィンドウを開かずに表示させようとすると、インラインフレームを解除してメインページを開かなければなりません。 説明がわかりづらかったら申し訳ありません。補足など必要でしたら一言お願いします。その都度追加していきます。
- 締切済み
- ホームページ作成ソフト
- インラインフレームへのリンクについて質問
説明がややこしいのですが…。 A.htmlという フレームを使用していないページがあります。 そこから、B.htmlという インラインフレームを使用したページにリンクします。 その時に、Aのメニューによって インラインフレームの中のページを変えたいのです。 例えば、Aに「C」「D」「E」という別々のリンクがあったとして 全部基本的にはB.htmlに飛ぶのですが Bにあるインラインフレームの中身を「C.html」「D.html」「E.html」…と変えたいのです。 分かりづらくてすみません。。 どうぞよろしくお願いします。
- ベストアンサー
- HTML
- インラインフレームを使ったリンク
左にAというフレーム、右にBというフレームがあります。フレームB内には更にインラインフレームを設置しています。 インラインフレーム内のリンクをクリックして、フレームBのみ更新させる形にしたいのですが、上手くいきません。 <a href="B.html">リンク</a>だと、インフレーム内にB.htmlが入ってしまいます。また、<a href="B.html" target="_top">としてみたのですが、そうするとフレームAが消え、フレームBのみウィンドウに広がってしまいます。 ご教授お願い致しますm(_ _)m
- ベストアンサー
- HTML
お礼
なるほど、頂いたソースで解決しました！ どうもありがとうございました。