インラインフレームのページ内リンク

締切済

質問者：Mentho
質問日時：2012/09/03 15:41
回答数：5件

似たような質問が多々ありましたが、どれも解決に至る内容ではなかったので質問させて頂きました。

【環境】
親ページを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件)

最新から表示
回答順に表示

No.5

回答者： ORUKA1951
回答日時：2012/09/05 19:37

ORUKA1951です。

なぜ、ページがスクロールしてくれないのかを、どうしたら説明できるかを考えていました。

　まず、通常のページでページ内アンカーがある場合を考えて見ましょう。視覚系ブラウザでは、表示領域の高さをウィンドウの高さとしています。そのため、
・ウィンドウ内にすべて表示されている場合はページはスクロールしません。してはなりません。
・ページの高さがウィンドウ幅より高く、それが表示されていない場合は、リンクでスクロールされます。そのときページの最下段はウィンドウ内に収まるようにスクロールされます。
　これが、狭いウィンドウで長いページを表示させる仕組みです。

　frame/iframe/objectを使って外部ファイルを表示させたときは、ウィンドウの高さではなく、指定された高さを表示領域として動作します。これは、その指定されたサイズを表示可能領域としないと、レンダリングそのものができないからです。
　すなわち、「page.htmlは縦長で、heightを調整してスクロールバーが出ない状態に」しているために、当然あるべき姿なのです。埋め込まれたページは、それを埋め込んだページが表示されている区画を知ることができないのですからね。

　したがって、子供であるHTMLが、その親であるHTMLを引き上げることは不可能ですし、そうあってはならないのです。

　対処としては、先に述べましたようにSSIを使って、そのHTML(<HEAD><BODY>わ含まない)ソースを本体HTML内にサーバー側で組み込むか、javascriptを使って---基本的にSSIと仕組みは同じでHTML全体を埋め込むことはできない----を使って埋め込むしか方法はありません。

　先の例で言うと
<div class="article">

</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-html4 … )
→article 要素はブログのエントリや新聞記事など、文書内で自己完結可能な箇所を示します。 ( http://standards.mitsue.co.jp/resources/w3c/TR/h … )

あなたの利用しているサーバーの種類や設定がわかりませんが、可能ならファイル名を
index.shtml
として、テストすると良いかもしれません。

- 0
- 件

通報する

No.4

回答者： ORUKA1951
回答日時：2012/09/05 18:26

訂正

[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>

- 0
- 件

通報する

No.3

回答者： ORUKA1951
回答日時：2012/09/05 17:10

＞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">

　</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>

- 0
- 件

通報する

No.2

回答者： ORUKA1951
回答日時：2012/09/04 20:02

targetは一切記述する必要がありません。

この回答への補足

targetを書かなくても動作しないんですが…。つーかtargetを指定しないのは_selfと同じですよね？

補足日時：2012/09/05 15:03

通報する

- 0
- 件

通報する

No.1

回答者： cma3atgoo
回答日時：2012/09/03 16:22

もう試されているかも知れませんが、

ラベルへのジャンプではダメだということですかね？

<a href="#ジャンプ先">ジャンプ</a>

<a name="ジャンプ先">ジャンプ先</a>

この回答への補足

ご回答ありがとうございます。
真っ先に試しましたが、target属性をどれにしても駄目でした。
page.htmlが単独で開いてしまったり、iframeの中にindex.htmlが開かれてしまったり。

色々調べたところ、Javascriptを使わないと駄目みたいですが、しっくりくるソースが見つかりませんでした。

補足日時：2012/09/04 19:40

通報する