- 締切済み
インラインフレームのページ内リンク
似たような質問が多々ありましたが、どれも解決に至る内容ではなかったので質問させて頂きました。 【環境】 親ページを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でも構いません)。 宜しくお願いします。
- みんなの回答 （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を使わないと駄目みたいですが、しっくりくるソースが見つかりませんでした。
補足
targetを書かなくても動作しないんですが…。つーかtargetを指定しないのは_selfと同じですよね？