- 締切済み
インラインフレームのページ内リンク
似たような質問が多々ありましたが、どれも解決に至る内容ではなかったので質問させて頂きました。 【環境】 親ページをindex.html、iframeで表示するページをpage.htmlとします。 page.htmlは縦長で、heightを調整してスクロールバーが出ない状態になっています。 【望む動作】 page.htmlにあるリンクをクリックすると、page.html内の特定の場所にジャンプ 但し、index.htmlとpage.htmlの位置関係(表示状態)はそのままで、フレームを使わないときの普通のページ内ジャンプと同じような動作をする 【現時点の問題点】 targetを変えても、iframe内に親ページごと表示される(合わせ鏡の世界のようになる)か、フレームが解除されてpage.htmlだけが表示されるのどちらかになってしまう(http://からのフルパスでも同じ) 提供されたスペースの為、index.htmlのheadはいじれない 現状はこのようになっていますが、レイアウトを崩さずページ内でジャンプさせることは可能でしょうか。 色々試してみたいので、「index.htmlのheadはいじれない」の縛りがある場合とない場合でご回答頂けましたら幸いです(Javascriptでも構いません)。 宜しくお願いします。
- Mentho
- お礼率19% (34/171)
- HTML
- 回答数5
- ありがとう数0
- みんなの回答 （5）
- 専門家の回答
みんなの回答
- ORUKA1951
- ベストアンサー率45% (5062/11036)
ORUKA1951です。 なぜ、ページがスクロールしてくれないのかを、どうしたら説明できるかを考えていました。 まず、通常のページでページ内アンカーがある場合を考えて見ましょう。視覚系ブラウザでは、表示領域の高さをウィンドウの高さとしています。そのため、 ・ウィンドウ内にすべて表示されている場合はページはスクロールしません。してはなりません。 ・ページの高さがウィンドウ幅より高く、それが表示されていない場合は、リンクでスクロールされます。そのときページの最下段はウィンドウ内に収まるようにスクロールされます。 これが、狭いウィンドウで長いページを表示させる仕組みです。 frame/iframe/objectを使って外部ファイルを表示させたときは、ウィンドウの高さではなく、指定された高さを表示領域として動作します。これは、その指定されたサイズを表示可能領域としないと、レンダリングそのものができないからです。 すなわち、「page.htmlは縦長で、heightを調整してスクロールバーが出ない状態に」しているために、当然あるべき姿なのです。埋め込まれたページは、それを埋め込んだページが表示されている区画を知ることができないのですからね。 したがって、子供であるHTMLが、その親であるHTMLを引き上げることは不可能ですし、そうあってはならないのです。 対処としては、先に述べましたようにSSIを使って、そのHTML(<HEAD><BODY>わ含まない)ソースを本体HTML内にサーバー側で組み込むか、javascriptを使って---基本的にSSIと仕組みは同じでHTML全体を埋め込むことはできない----を使って埋め込むしか方法はありません。 先の例で言うと <div class="article"> <!--#include file="page.html" --> </div> として、page.htmlは <div class="header"> <h1>タイトル</h1> <p>このページでは・・・・</p> </div> <div class="section"> <div class="section" id="A1"> <h2>一章見出し</h2> <p>・・・</p> </div> <div class="section" id="A2"> <h2>二章見出し</h2> <p>・・・</p> </div> <div class="section" id="A3"> <h2>三章見出し</h2> <p>・・・</p> </div> <div class="section" id="A4"> <h2>四章見出し</h2> <p>・・・</p> <p>・・・</p> <p>・・・</p> </div> <div class="contentTable"> <ol> <li><a href="#A1">A1</a></li> <li><a href="#A2">A2</a></li> <li><a href="#A3">A3</a></li> <li><a href="#A4">A4</a></li> </ol> </div> </div> <div class="footer"> <h2>文書情報</h2> </div> ということです。こうすると、includeの部分がすっかり置き換わります。 [補足] articleというclass名は、完結したひとつの記事と言う意味を示します。 →DIV要素とSPAN要素は、id属性及び class属性と併用することで、文書に構造を付加するための一般機構を提供する。 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#h-7.5.4 ) →article 要素はブログのエントリや新聞記事など、文書内で自己完結可能な箇所を示します。 ( http://standards.mitsue.co.jp/resources/w3c/TR/html5-diff/#new-elements ) あなたの利用しているサーバーの種類や設定がわかりませんが、可能ならファイル名を index.shtml として、テストすると良いかもしれません。
- ORUKA1951
- ベストアンサー率45% (5062/11036)
訂正 [HTML4.01transitinal/HTML4.01frameset]非推奨 <div class="section"> <h2>見出し</h2> <p> <iframe src="./page.html" style="display:block;width:600px;height:400px;overflow:hidden;border:none;"> </p> </div>
- ORUKA1951
- ベストアンサー率45% (5062/11036)
＞targetを指定しないのは_selfと同じですよね？ そうです。 リンクの場合、あくまで参照できる親要素の高さ内に表示できないから、リンクでページがスクロールされるのですから、ページのすべてがすでに表示されている場合は、親になるページはスクロールしません。なぜなら、高さはこれだけだよと設定してしまっているからです。 表示領域の指定がない場合はウィンドウの高さになります。 ★この場合は、本来はSSIなどで該当HTMLの本文部分だけを読み込むべきですが、それができないならpage.htmlの内容をコピーペーストするしかないでしょう。 ★下記ソースはタブを全角スペース に置換してあります。 [HTML4.01strict]推奨 <div class="section"> <h2>見出し</h2> <p><object data="./page.html" type="text/html" style="display:block;width:600px;height:400px;overflow:hidden;"> </object></p> </div> [HTML4.01transitinal/HTML4.01frameset]非推奨 <div class="section"> <h2>見出し</h2> <p><iframe src="./page.html" style="display:block;width:600px;height:400px;overflow:hidden;border:none;"> </object></p> </div> [index.html]HTML4.01strict <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="ja"> <head> <meta http-equiv="content-type" content="text/html; charset=Shift_JIS"> <title>サンプル</title> <meta name="author" content="ORUKA1951"> <meta http-equiv="Content-Style-Type" content="text/css"> <link rev="made" href="mailto:oruka1951@hoge.com" title="send a mail" > <link rel="START" href="../index.html"> <style type="text/css"> <!-- body{background-color:silver;} div.header{height:100px;} div.section{position:relative;} div.section div.section{margin-left:20%;background-color:white;height:300px;} div.section div.contentTable{width:19%;position:fixed;top:110px;background-color:yellow;} div.section div.section+div.section{background-color:aqua;} div.section div.section+div.section+div.section{background-color:fuchsia;} div.section div.section+div.section+div.section+div.section{background-color:lime;} --> </style> </head> <body> <div class="header"> <h1>タイトル</h1> <p>このページでは・・・・</p> </div> <div class="section"> <div class="section" id="A1"> <h2>一章見出し</h2> <p>・・・</p> </div> <div class="section" id="A2"> <h2>二章見出し</h2> <p>・・・</p> </div> <div class="section" id="A3"> <h2>三章見出し</h2> <p>・・・</p> </div> <div class="section" id="A4"> <h2>四章見出し</h2> <p>・・・</p> <p>・・・</p> <p>・・・</p> </div> <div class="contentTable"> <ol> <li><a href="#A1">A1</a></li> <li><a href="#A2">A2</a></li> <li><a href="#A3">A3</a></li> <li><a href="#A4">A4</a></li> </ol> </div> </div> <div class="footer"> <h2>文書情報</h2> </div> </body> </html>
- ORUKA1951
- ベストアンサー率45% (5062/11036)
targetは一切記述する必要がありません。
- cma3atgoo
- ベストアンサー率35% (32/90)
もう試されているかも知れませんが、 ラベルへのジャンプではダメだということですかね？ <a href="#ジャンプ先">ジャンプ</a> <a name="ジャンプ先">ジャンプ先</a>
補足
ご回答ありがとうございます。 真っ先に試しましたが、target属性をどれにしても駄目でした。 page.htmlが単独で開いてしまったり、iframeの中にindex.htmlが開かれてしまったり。 色々調べたところ、Javascriptを使わないと駄目みたいですが、しっくりくるソースが見つかりませんでした。
関連するQ&A
- 親ページからインラインフレーム内の<a name="～">リンクへ飛ばしたときのIEの動きについて
例えば、IEで <html> <head><title>index.html</title> </head> <body><center> <p style="margin: 100px auto 50px auto">サンプル</p> <p><a href="a.html#a" target="frame">リンク</a></p> <iframe src="a.html" width="640" height="500" name="frame" style="margin-bottom: 400px"> </iframe></center> </body> </html> というソースのindex.htmlに、 <html><head><title>インフレーム・a.html</title></head> <body><p style="margin-top: 500px">余白</p> <p><a name="a">NAME A</a></p> <p style="margin-top: 500px">余白</p> </body></html> というソースのa.htmlというファイルをインラインフレームで読み込み、 index.htmlの「<p><a href="a.html#a" target="frame">リンク</a></p>」をクリックした場合、 インラインフレーム内のa.htmlの「<p><a name="a">NAME A</a></p>」がブラウザの一番上に表示されるよう、 index.htmlのページ全体が上に動いてしまいますよね。 これを、（同じものをOperaで動作させたときのように、） index.htmlのページ全体ではなくインラインフレーム内のa.htmlだけが 動くように表示させたいのですが、何かいい解決策はあるでしょうか？ 最初はIEのバグかと思ったのですが、FirefoxでもMozillaでも 同様なので、Operaの解釈のほうが特殊なのかもしれませんが…。
- ベストアンサー
- HTML
- インラインフレーム内のページの高さを取得するには
<iframe src="page.html"></frame> で、「page.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
- インラインフレームの、リンク先のページに対応した高さ可変
私のサイトで、題名のとおりの方法をしてしており、 現在、以下を利用して、可変が可能になっています。 function GetHeight(ID,NAME) { if (document.height) { document.getElementById(ID).style.height = parent.frames[NAME].document.height +20 +"px" ; } else { document.getElementById(ID).style.height = parent.frames[NAME].document.body.scrollHeight +20 +"px"; } } 通常の場合はこれで大丈夫です。 しかし、リンク先のページにインラインフレームを使用していると、どうしてもうまくできません。 一番前に index.html。index.htmlの中にiframeとして、main.htmlを、 main.htmlの中にiframeとして、higumain.htmlをおいています。 それぞれのiframeを可変可能にしたいのですが、 index.htmlの中のiframe「main.html」がうまく可変されません。 index.htmlのiframe は、他のiframeを移用していないリンク先なら可変しました。 何故でしょうか。解決法、教えてください。 上記で足りない説明がありましたら、すみません。言ってください。すぐに加えます。 何度も試行錯誤したのですが、うまくいきません。どうか、教えてください。
- ベストアンサー
- JavaScript
- JavaScript フレーム内のインラインフレームへのリンク
こんにちは JavaScriptを使って、セレクトメニューのリストから選択すると、同ページ内にあるインラインフレームにページが展開するようにしたいのですが行き詰ってしまったので質問させてください。 ・問題点 下記のようにJavaScriptの記述をしているのですが ブラウザで開いて見ると、「更新情報6月」などを選択しても、もともと開いているページが表示されたままで別のページが開きません。 ・ファイル構成 index.html(フレームセット） －menu.html（フレーム名 menu） －main.html（フレーム名 main） new.html(indexを開いた時に表示されているページ） new6.html（更新情報6月をクリックすると開いてほしいページ） new5.html（更新情報5月をクリックすると開いてほしいページ） main.htmlの中にインラインフレーム(name＝myNew) とセレクトメニューがあります。 こちらの過去ログを見たりして記述することが出来たのですが、main.htmlを単体で開いた場合は動作してindex.htmlで開いた場合は動作しないようなのです 「parent.myNew.」がいけないのかなと思うのですが JavaScriptの細かいことが分からないので どうしたら良いのか・・・ parentを消したり、thisにしたりしてみたんですが うまくいきませんでした。 どなたかアドバイスをお願いいたします ----- 記述内 ------------ <select onChange="parent.myNew.location.href=this.options[this.selectedIndex].value"> <option value="" selected></option> <option value=new6.html>更新情報6月</option> <option value=new5.html>更新情報5月</option> </select> <iframe src="new.html" name="myNew" width="250" height="400"></iframe>
- ベストアンサー
- JavaScript
- 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
- インラインフレームを観覧できるのに…
カテゴリ違いだったらすいません。 僕は今HPを作成中で、更新履歴にインラインフレームを使おうと思っているのですが、他のページでインラインフレームを観覧できるのに自分で打ち込んだフレームには、「ページが表示できません」と表示されてしまいます。(フレームの形にはなっている)下にフレームのソースを書くので、悪いところがあったら教えて下さい。 <Iframe Src="update flame.html" Width="200" Height="80" Marginwidth="0" Marginheight="0"> 文章 </Iframe> ちなみにページはメモ帳で作っていて、契約しているのはCNCです。 宜しくお願いします。
- ベストアンサー
- Windows XP
- <iframe>で読み込むページの高さを自動取得して、heigthに代入
一つ大きなフレームを <iframe name="disp" src = "" height=1000 width=1000 frameborder=0 scrolling=auto></iframe> とおいて、同一ページ内から<a href="test.html" target=disp> として、test.htmlが空白ページの<iframe>内に表示させるようにしたいのですがその都度、読み込むページの高さを自動取得して、heightとして自動的に適切な高さに変換するということはできいないでしょうか？
- ベストアンサー
- HTML
- HTMLの画像のリンクについて
ページ内にインラインフレームを作成し画像サムネイルをクリックするとフレーム内に表示するという感じにしたいのですが、フレームサイズを500×500にしたので、このサイズを超える画像を表示するとページのスタイルが崩れてしまいます。元画像のリサイズをせずに表示させる方法はないでしょうか？ 構造は以下のようになってます。 <html> <head> <title>photo</title> </head> <body BGCOLOR="007777"> <br><br> <iframe NAME="photo" WIDTH="500" HEIGHT="500" FRAMEBORDER="0" ALIGN="right"></iframe> <br><br><br> <p> <a HREF="gazou1.jpg" TARGET="photo"><IMG SRC="gazou1.jpg" ALT="" WIDTH="50" HEIGHT="50" BORDER="0"></a> <a HREF="gazou2.jpg" STYLE=""><IMG SRC="gazou2.jpg" ALT="" WIDTH="50" HEIGHT="50" BORDER="0"></a> </body>
- ベストアンサー
- その他（インターネット・Webサービス）
- iframeからのリンクでスクロールさせるには
scrollsmoothly.jsを使用させもらっています。 iframe内にtarget="_top"でリンクを設置。 ※リンク先はiframeを表示しているページ内へのアンカーリンクです。 iframeでscrollsmoothly.jsを読み込んでもスムーズスクロールされません。 iframeが表示されているページに読み込んでも同じです。 target="_top"を外せばフレーム内でスクロールするのですが、 フレーム内でリンクさせたいわけではないので、どうしてもこれを外せません。 iframe内からのアンカーリンクでスムーズスクロールするにはどのようにすればよいでしょうか。 よろしくお願いします。
- 締切済み
- JavaScript
補足
targetを書かなくても動作しないんですが…。つーかtargetを指定しないのは_selfと同じですよね？