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

フレーム制御

HTMLでは複数のフレームを同時に変更することはできませんが、JavaScriptを使えば可能です。ここではインラインフレームiframe を使います。もちろん frame でも同じことです。 frame ならば、

から対応してます。

対応状況

head部のソース

<head>
<script type="text/JavaScript">
<!--
function ChangeIFrame(CIF1,CIF2)
{
	parent.leftframe.location.href = CIF1;
	parent.rightframe.location.href = CIF2;
}
//-->
</script>
</head>

body内ソース

<body>
<p><a href="javascript:ChangeIFrame('sub.html','main.html')">ここ</a>をクリックすると左右が入れ替わります。</p>
<iframe name="leftframe" src="main.html" frameborder="0" marginwidth="5" marginheight="5" scrolling="yes"
 align="left" width="200" height="100"><p>このページは「インライン・フレーム機能」を使用しています。<br>
 「インライン・フレーム機能」に対応していないブラウザの場合には、 <a href="main.html">こちら</a>へどうぞ。
 </iframe>
<iframe name="rightframe" src="sub.html" frameborder="0" marginwidth="5" marginheight="5" scrolling="yes"
 align="right" width="200" height="100";><p>このページは「インライン・フレーム機能」を使用しています。<br>
 「インライン・フレーム機能」に対応していないブラウザの場合には、 <a href="sub.html">こちら</a>へどうぞ。
 </iframe>
<p align="center"><a href="javascript:ChangeIFrame('main.html','main.html')">両方ともMAIN</a><br>
<a href="javascript:ChangeIFrame('sub.html','sub.html')">両方ともSUB</a><br>
<a href="javascript:ChangeIFrame('main.html','sub.html')">元に戻す</a></p>
</body>

表示

ここをクリックすると左右が入れ替わります。

両方ともMAIN
両方ともSUB
元に戻す