フレーム - とほほのWWW入門

ウィンドウを複数のフレームに分割するには <frameset> を用います。ただし、<frameset> によるフレーム分割は HTML5 で廃止されました。ここでは、以前使用されていた、古いフレーム仕様について説明します。詳細は <frameset> を参照してください。

HTML

<frameset cols="150,*">
 <frame src="page1.html" name="left">
 <frame src="page2.html" name="right">
</frameset>

フレームの境界線を無くすには

<frameset> タグに frameborder=0 と border=0 属性を指定します。

HTML

<frameset cols="150,*" frameborder=0 border=0>
   :

フレームの境界線を固定するには

<frame> タグに noresize 属性を指定してください。

HTML

<frameset cols="150,*">
 <frame src="frame1.html" noresize>
 <frame src="frame2.html" noresize>
</frameset>

別フレームの内容を書きかえるには

左フレームに目次を、右フレームにその内容を表示させたいときは、まず <frame> タグに name 属性を指定して右フレームに名前をつけておき、左フレームの <a href="..."> に target 属性を指定してやります。

HTML (index.html)

<html>
<head><title>テスト</title></head>
<frameset cols="150,*">
 <frame name="menu" src="menu.html">
 <frame name="main" src="main.html">
</frameset>
</html>

HTML (menu.html)

   :
<a href="xxx.html" target="main">XXX</a>
   :

フレームを解除するには

フレームを解除するには、target 属性に "_top" を指定します。

HTML

<a href="top.html" target="_top">トップページ</a>

複数のフレームを同時に書きかえるには

JavaScript を用います。frame1、frame2 は、<frame name="～"> でつけた名前です。

HTML

<script>
function func() {
   top.frame1.location.href = "aaa.html";
   top.frame2.location.href = "bbb.html";
   return false;
}
</script>
<a href="#" onclick="return func()">XXX</a>

インナーフレームを置くには

ページの中央などに、インナーフレームを置くには <iframe> を用います。

HTML

<iframe src="index.html" height=100 width=300></iframe>

JavaScriptで他のフレームを参照するには

JavaScript で他のフレームを参照するには、window(このフレーム、このウィンドウ)、parent(ひとつ親のフレーム)、top(トップフレーム)などの予約キーワードや、<frame> タグの name 属性で指定したフレーム名を使用します。下記の例では、最初の 2行は自フレームのフォームを参照し、3行目はトップの下にある frame2 という名前のフレームの中のフォームを参照しています。

HTML

<script>
function func() {
  alert(document.form1.text1.value);      // 省略時は自フレーム
  alert(window.document.form1.text1.value); // 自フレーム
  alert(top.frame2.document.form2.text2.value);
}
</script>

フレームのタイトルをタイトルバーに表示するには

top.document.title に代入することにより、タイトルバーに表示されるタイトルを動的に変更することができます。フレームのメインページの先頭に下記のスクリプトを埋め込むことで、フレームの子ページのタイトルをタイトルバーに表示することが可能になります。

HTML

<script>
top.document.title = document.title;
</script>