|
| いまさらHTML,CSS講座トップ > HTML4.01 講座インデックス > フレーム Frame リンク ウィンドウの制御 |
|
|
 フレーム Frame リンク ウィンドウの制御
|
|
| ひとつのページに複数のウィンドウを分割して表示するフレームページは、リンク先を開く場所 ( ウィンドウ ) の指定方法が複雑に感じられますが、基本は、target 属性に 値 を指定するだけで、本稿では少し注意が必要な2種類の値を解説します。 ⇒その他の target 属性の値 |
| サンプルページはすべて新規でウィンドウを開き表示されますので、フレームを使用したページにおいての target 属性の値と、ウィンドウの挙動を参照して下さい。 |
| ■ 別のフレームにリンク先を表示します。 |
|
| 別のフレームにリンク先を表示する場合、フレームセットのページで、各フレームに name属性で、任意の名前を指定 ( フレーム名 ) しておき、リンクを設置するページのリンク指定で、target属性の値に、表示したいフレーム名を指定します。 |
 ソース フレームセット ( Frameset ) のページ |
<frameset cols="200,*" title="フレームテストページ">
<frame name="menu" src="menu.htm" title="メニュー">
<frame name="body" src="body.htm" title="コンテンツ">
|
| ソース リンクが指定してあるページ |
<a href="menu002.htm" target="body">このリンク先の内容は、body.htm のウィンドウに表示されます。</a>
|
| ソース 元の状態に戻すリンク |
<a href="body.htm">トップへ戻る ( body.htm をリンク先にする場合 )</a>
<a href="index.htm" target="_top">トップへ戻る ( index.htm をリンク先にする場合)</a>
|
| 別フレームへリンク先を表示した後、トップページに戻るような、元の状態に戻す為のリンクを指定する場合、上記ソース例ですと、body.htm にリンク先を展開しているので、body.htm を戻るリンクに指定し場合は、殆どのブラウザのウィンドウの制御は「 現在のウィンドウに開く 」に設定されていますので、target 属性を指定する必要はありません。 |
| また、index.htm をリンク先に指定した場合は、下記で説明する target="_top" ( フレームを解除して表示 ) を指定しないと、body.htm でリンクを指定していますので、body.htm のウィンドウで index.htm が展開されてしまいます。 |
 サンプルページ ( index.htm ) |
|
|
| ■ インラインフレームの場合 |
|
| インラインフレーム内にリンク先を表示する場合、インラインフレームをセットする iframe 要素に、name属性で、任意の名前を指定 ( インラインフレーム名 ) しておき、リンクを設置するページのリンク指定で、target属性の値に、表示したいインラインフレーム名を指定します。 |
| ソース インラインフレーム |
<iframe src="iframe_ex.htm" name="iframe_ex" width="300" height="200" frameborder="0" scrolling="yes" align="left" marginwidth="20" marginheight="5" title="インラインフレームサンプルページ"></iframe>
|
| ソース リンクが指定してあるページ |
<a href="menu_if.htm" target="iframe_ex">このリンク先の内容は、body.htmにあるインラインフレームに表示されます。</a>
|
| ソース 元の状態に戻すリンク |
<a href="iframe_ex.htm">戻る ( iframe_ex.htm をリンク先に指定する場合 )</a>
<a href="index_if.htm" target="_top">戻る ( index_if.htm をリンク先に指定する場合 )</a>
|
| 通常のフレームと同じく、殆どのブラウザのウィンドウの制御は「 現在のウィンドウに開く 」に設定されていますので、先のリンクが展開されている インラインフレーム内で 元の状態に戻すリンク を設定した場合、iframe_ex.htm ( 元々表示されていたファイル ) を指定する場合は、target="_top" の指定は必要ありません。 |
| また、index_if.htm ( トップページ )に、戻るボタンのリンク先を指定した場合、target="_top" を指定しないと、インラインフレーム内に、index_if.htm ( トップページ )が展開されてしまいます。 |
| サンプルページ ( index_if.htm ) |
|
| ページTopへ |
|
| ■ フレームを解除しリンク先を表示します。 |
|
| フレームを解除しリンク先を表示する場合は、リンクを設置するページのリンク指定で、target属性の値に、_top ( アンダーバー記号top ) を指定します。 |
| ソース リンクが指定してあるページ |
<a href="menu003.htm" target="_top">このリンク先の内容は、フレームを解除し表示されます。</a>
|
| サンプルページ |
|
| ページTopへ |
|
|
|
|
|
