同時に複数フレームを変更する



 JavaScriptを使えばHTMLではできない事や面倒な事が簡単にできます。例えばボタン等をクリックして複数のフレームを変更する事も簡単にできます。どのようにするかというと、まずフレーム分割時にフレームに名前を付けておきます(配列で参照する方法もあります)。<A>タグでonClickイベントを使用して同時にフレームを変更します(下記サンプル参照)。JavaScriptは;(セミコロン)で区切ればいくらでも命令を記述する事ができますので変化させたいフレームの数だけ書けばできあがりです。

・main.html
<HTML>
<HEAD>
<TITLE>FrameSet</TITLE>
</HEAD>
<FRAMESET ROWS="20%,20%,*">
<FRAME SRC="Dummy.html" name="No1">
<FRAME SRC="Dummy.html" name="No2">
<FRAME SRC="control.html" name="No3">
</FRAMESET></HTML>

・sub1.html
<HTML>
<HEAD>
<TITLE>Sample</TITLE>
</HEAD>
<BODY bgColor="white">
<CENTER><H1>フレームその1</H1></CENTER>
</BODY>
</HTML>

・sub2.html
<HTML>
<HEAD>
<TITLE>Sample</TITLE>
</HEAD>
<BODY bgColor="white">
<CENTER>
<H1>フレームその2</H1>
</CENTER>
</BODY>
</HTML>

・control.html
<HTML>
<HEAD>
<TITLE>Sample</TITLE>
</HEAD>
<BODY bgColor="white">
<CENTER>
<H1>フレーム制御</H1>
<P>
<A HREF="javascript:void(0)" onClick="parent.No1.location.href='sub1.html'; parent.No2.location.href='sub2.html'">
フレーム同時変更</A>
</CENTER>
</BODY>
</HTML>