SITEMAP [初めてのホームページ講座] [JavaScript , DHTML] [２フレーム同時リンク]
Dynamic HTMLの参考書 Java Scriptの参考書

２フレーム同時リンク

機能

フレーム処理に対してJavaScriptを用いたちょい技を使ってみたいと思ったことがあることでしょう。 極々一般的なことですが、１つのリンクで２つのフレームを同時に変更してしまうスクリプトです。

利用方法

HEAD部分にスクリプトを記述します。

BODY部のリンク先にJavaScriptを指定（href="JavaScript:DblChg(A1,B1,A2,B2)"）します。 当然ながら、呼び出すフレーム名（A1,A2）はフレーム設定したときの名前と同じものにします。 またリンク先（B1,B2）を指定します。 この時、フレームA1に表示する内容はB1から、フレームA2に表示する内容はB2からのものになります。

改造方法

３つ以上に増やしたい場合、スクリプト部分の「window.open」の行を増やし、引数も増やします。 増やした引数の変数名は他のものにする必要があります。例えば、以下のようになります。 

function DblChg(FrNm1,Url1,FrNm2,Url2,FrNm3,Url3){
	window.open(Url1,FrNm1);
	window.open(Url2,FrNm2);
	window.open(Url3,FrNm3);
}

当然ながら、リンク元のhref属性値であるJavaScriptコール部分の引数も増やします。

対応ブラウザ

IE3,NN2以上

サンプル

［サンプルを見る］ ［ダウンロード］

フレーム元（sp40.html）
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Frameset//EN">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<title>２フレーム同時リンク</title>

</head>

<frameset cols="50%,50%">
<frame src="sp41_1.html" name="LeftFrame">
<frame src="sp41_2.html" name="RightFrame">
</frameset>

<noscript>
<body>
<p>フレームに関する紹介のページです。フレーム対応版でご覧下さい。</p>
</body>
</noscript>

</html>
初期に表示する左フレーム（sp41_1.html）
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<title>２フレーム同時リンク</title>

<style type="text/css">
<!--
a{
	text-decoration:	none;
}
h1{
	font-size:			24pt;
	font-weight:		bold;
	color:				#c30;
	margin:				0 0 10px 0;
	padding:			0 0 0 10px;
	border-style:		solid;
	border-color:		#f00;
	border-width:		0px 0px 1px 20px;
}
div{
	margin:				10px;
}
-->
</style>

<script language="JavaScript">
<!--
function DblChg(FrNm1,Url1,FrNm2,Url2){
	window.open(Url1,FrNm1);
	window.open(Url2,FrNm2);
}
// -->
</script>

</head>

<body>

<h1>sp41_1.html(LeftFrame)</h1>

<div>
<a href="JavaScript:DblChg('LeftFrame','sp41_3.html','RightFrame','sp41_4.html')">
クリックするとこのフレームを含み、右側のフレームも同時に変更します。
</a>
フレーム名、変更内容は下表、右フレームの表の通りです。
</div>

<table border="1" cellpadding="3">
<tr>
	<th>位置</th>
	<th>フレーム名</th>
	<th>現在</th>
	<th>リンク先</th>
</tr>
<tr>
	<td>左</td>
	<td>LeftFrame</td>
	<td>sp41_1.html</td>
	<td>sp41_3.html</td>
</tr>
<tr>
	<td>右</td>
	<td>RightFrame</td>
	<td>sp41_2.html</td>
	<td>sp41_4.html</td>
</tr>
</table>

</body>
</html>
初期に表示する右フレーム（sp41_2.html）
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<title>２フレーム同時リンク</title>

<style type="text/css">
<!--
a{
	text-decoration:	none;
}
h1{
	font-size:			24pt;
	font-weight:		bold;
	color:				#c30;
	margin:				0 0 10px 0;
	padding:			0 0 0 10px;
	border-style:		solid;
	border-color:		#f00;
	border-width:		0px 0px 1px 20px;
}
div{
	margin:				10px;
}
-->
</style>

<script language="JavaScript">
<!--
function DblChg(FrNm1,Url1,FrNm2,Url2){
	window.open(Url1,FrNm1);
	window.open(Url2,FrNm2);
}
// -->
</script>

</head>

<body>

<h1>sp41_2.html(RightFrame)</h1>

<table border="1" cellpadding="3">
<tr>
	<th>位置</th>
	<th>フレーム名</th>
	<th>現在</th>
	<th>リンク先</th>
</tr>
<tr>
	<td>左</td>
	<td>LeftFrame</td>
	<td>sp41_1.html</td>
	<td>sp41_3.html</td>
</tr>
<tr>
	<td>右</td>
	<td>RightFrame</td>
	<td>sp41_2.html</td>
	<td>sp41_4.html</td>
</tr>
</table>

</body>
</html>
リンク後に表示する左フレーム（sp41_3.html）
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<title>２フレーム同時リンク</title>

<style type="text/css">
<!--
a{
	text-decoration:	none;
}
h1{
	font-size:			24pt;
	font-weight:		bold;
	color:				#03c;
	margin:				0 0 10px 0;
	padding:			0 0 0 10px;
	border-style:		solid;
	border-color:		#00f;
	border-width:		0px 0px 1px 20px;
}
div{
	margin:				10px;
}
-->
</style>

<script language="JavaScript">
<!--
function DblChg(FrNm1,Url1,FrNm2,Url2){
	window.open(Url1,FrNm1);
	window.open(Url2,FrNm2);
}
// -->
</script>

</head>

<body>

<h1>sp41_3.html(LeftFrame)</h1>

<div>
<a href="JavaScript:DblChg('LeftFrame','sp41_1.html','RightFrame','sp41_2.html')">
クリックするとこのフレームを含み、右側のフレームも同時に変更します。
</a>
フレーム名、変更内容は下表、右フレームの表の通りです。
</div>

<table border="1" cellpadding="3">
<tr>
	<th>位置</th>
	<th>フレーム名</th>
	<th>現在</th>
	<th>リンク先</th>


</tr>
<tr>
	<td>左</td>
	<td>LeftFrame</td>
	<td>sp41_3.html</td>
	<td>sp41_1.html</td>
</tr>
<tr>
	<td>右</td>
	<td>RightFrame</td>
	<td>sp41_4.html</td>
	<td>sp41_2.html</td>
</tr>
</table>

</body>
</html>
リンク後に表示する左フレーム（sp41_4.html）
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<title>２フレーム同時リンク</title>

<style type="text/css">
<!--
a{
	text-decoration:	none;
}
h1{
	font-size:			24pt;
	font-weight:		bold;
	color:				#03c;
	margin:				0 0 10px 0;
	padding:			0 0 0 10px;
	border-style:		solid;
	border-color:		#00f;
	border-width:		0px 0px 1px 20px;
}
div{
	margin:				10px;
}
-->
</style>

<script language="JavaScript">
<!--
function DblChg(FrNm1,Url1,FrNm2,Url2){
	window.open(Url1,FrNm1);
	window.open(Url2,FrNm2);
}
// -->
</script>

</head>

<body>

<h1>sp41_4.html(RightFrame)</h1>

<table border="1" cellpadding="3">
<tr>
	<th>位置</th>
	<th>フレーム名</th>
	<th>現在</th>
	<th>リンク先</th>
</tr>
<tr>
	<td>左</td>
	<td>LeftFrame</td>
	<td>sp41_3.html</td>
	<td>sp41_1.html</td>
</tr>
<tr>
	<td>右</td>
	<td>RightFrame</td>
	<td>sp41_4.html</td>
	<td>sp41_2.html</td>
</tr>
</table>

</body>
</html>
[Go To Top]
Last modified Mar,2000
Copyright(C)2000 T.Miyazaki , All Rights Reserved.