フレーム

ウィンドウを複数のフレームに分割するには <frameset> を用います。詳細は <frameset> を参照してください。

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

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

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

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

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

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

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

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

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

======<index.htm>======
<html>
<head><title>テスト</title></head>
<frameset cols="150,*">
 <frame name="hidari" src="content.htm">
 <frame name="migi" src="main.htm">
</frameset>
</html>

======<content.htm>======
   :
<a href="xxx.htm" target="migi">XXX</a>
   :

■ フレームを解除するには

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

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

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

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

<script type="text/javascript">
<!--
function func() {
   top.FRAME1.location.href = "aaa.htm";
   top.FRAME2.location.href = "bbb.htm";
   return false;
}
// -->
</script>
<a href="#" onclick="return func()">XXX</a>

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

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

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

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

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

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

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

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

<script type="text/javascript">
<!--
top.document.title = document.title;
// -->
</script>