【HTML】frameset / frame について

HTML

frameset / frame

サンプル

<html>
<frameset rows="20%,*,20%">
  <frame name="header" scrolling="no" noresize src="./header.html">
  <frameset cols="30%,*">
     <frame name="menu" src="./menu.html">
     <frame name="main" src="./main.html">
  </frameset>
  <frame name="footer" scrolling="no" noresize src="./footer.html">
  <noframes>
   Your browser doesn't support frameset/frame
  </noframes>
</frameset>
</html>

参考文献

http://www.tohoho-web.com/html/frameset.htm

■ 基本文法

フレームを横・縦方向に分割

[横方向に分割]
 <frameset rows="割合,割合" ...

[縦方向に分割]
 <frameset cols="割合,割合" ...

境界線の表示・非表示

[境界線の表示]
 <frameset frameborder="1" ...

[境界線の非表示]
 <frameset frameborder="0" ...

フレームのサイズを固定する

  <frame noresize ...

フレームを使用した時のリンクについて

http://www.tagindex.com/html_tag/frame/frame_target.html
 * Aタグに、target属性を追加して指定する

<a target="【指定する値】" ...

 * 【指定する値】は以下の通り。

     指定する値の種類    |                  説明
-------------------------+--------------------------------------------------
_blank                   | 新規のウィンドウに表示
_self                    | 現在のフレームに表示 ★重要★
_parent                  | 親フレームに表示
_top                     | フレーム分割を解除してウィンドウ全体に表示 ★重要★
フレーム名、ウィンドウ名 | 任意のフレームに表示

■ frameset / frame のいろいろ

子フレームから別フレームをリロードするには...

 * frameset/frameで構成されているページで、ヘッダーに、ログインのユーザ名が表示されている。
   そのサイト構成の中で、メイン（main.html）からユーザ名を変更した際に、ヘッダー部のデータも
   更新されるかと思ったけど、更新されなかった。

解決策

 * 子フレームから別フレームをリロードするには、JavaScriptを使ってリロードする必要がある。

サンプル

 * 本来であれば、JSP/Servletでやるのだが、
   今回は「子フレームから別フレームをリロードする」方法に搾りたいので
   サンプルは、HTML+JavaScriptだけで記述する
  （JSP/Servleでは、直接「子フレームから別フレームをリロードする」事は出来ないし）
index.html 
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Sample</title>
</head>
<body>
<frameset>
  <frame src="header.html" name="header"><!-- ここをリロードする -->
  <frame src="main.html" name="main">
  <frame src="footer.html" name="footer">
</frameset>
</body>
</html>
main.html 
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<script language="JavaScript">
<!--
function reloadFrame() {
  parent.frames["header"].location.reload();
}
//-->
</script>
<title>Sample</title>
</head>
<body onload="reloadFrame()">
Main
</body>
</html>

参考文献

http://oshiete.goo.ne.jp/qa/1105413.html

■ frameset / frame のトラブル

frameset/frameが表示されない

 *i以下のサンプルで、 frameset/frameが表示されない

サンプル : frameset/frameが表示されない

<html>
<body>
<frameset rows="20%,*">
  <frame name="header" src="./header.html">
  <frame name="footer" src="./footer.html">
</frameset>
</body>
</html>

原因

 * FRAMESETを使う場合は、BODYタグを使ってはいけないのにもかかわらず、
   BODYタグを使っているため

解決策

* BODYタグを削除 
<html>
<frameset rows="20%,*">
  <frame name="header" src="./header.html">
  <frame name="footer" src="./footer.html">
</frameset>
</html>

参考文献

http://hp.vector.co.jp/authors/VA014833/wrong1.html