フレーム

トップ > 逆引きリファレンス > フレーム

フレームに分割するには

ウィンドウを複数のフレームに分割するには <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>

Copyright (C) 2003 杜甫々
初版: 2003年10月12日、最終更新:2003年10月25日
http://www.tohoho-web.com/how2/frame.htm