SITEMAP [初めてのホームページ講座] [JavaScript , DHTML] [ウィンドウコントローラ]
Dynamic HTMLの参考書 Java Scriptの参考書

ウィンドウコントローラ

機能

ポップアップなウインドウを開き、そこから別ウインドウをコントロールするスクリプトです。

一般的によく見るものですが、ウインドウを閉じたり、なるべく一番上に表示させたり、 初期の表示位置を変更したりとできます。

類似サンプル

  1. ちびウインドウ
  2. ウインドウリサイズ
  3. ウインドウリムーブ
  4. FULL SCREEN SCRIPT

利用方法

親ウインドウ、子（MENU）ウインドウ、リンク先と最低３つのHTMLファイルが必要です。 親子ウインドウの２つには、HEAD部分にスクリプトを記述し、onloadやonclick属性をそれぞれ指定します。

親ウインドウには、onloadイベント時の呼び出し先関数と子ウインドウを開くためのスクリプトを記述します。 子ウインドウには、onclickイベント時の呼び出し先関数やそれに関係する関数を記述します。 その他、必要に応じてスタイル指定を行いますが、これは個人の趣味の範囲で対応して下さい。

難しいことは抜きにして言うと、スクリプトは全てコピーして使い、BODY部のみの変更に留めるだけでも結構です。 またその変更に関しては以下を参照下さい。

最後に、これらのサンプルに使用している関数は、 「ちびウインドウ」 「ウインドウリサイズ」 「ウインドウリムーブ」 を使用して構成しています。

親ウインドウ(sp57.html)
<body onload="Init('sp57_0.html',150,350)">
を記述します。引数の詳細については下記参照。
リンク先URL('sp57_0.html')
MENUとして表示する子ウインドウのURLを親ウインドウのファイルに対する相対パスで指定します。 ここでは同一パスにある「sp57_0.html」を子ウインドウとして使用しています。
子ウインドウの幅(150)
子ウインドウの幅をピクセル単位で指定します。
子ウインドウの高さ(350)
子ウインドウの高さをピクセル単位で指定します。
子ウインドウ(sp57_0.html)
<body onload="Init(2)">
を記述します。引数の詳細については下記参照。
初期表示位置(2)
初期の表示位置を指定します。 表示位置はスクリーンサイズ、ウインドウサイズを自動計算して画面の隅に表示します。 対応していないブラウザの場合は、左上隅になります。
  • 1 = 左上
  • 2 = 右上
  • 3 = 右下
  • 4 = 左下
  • それ以外 = 左上
（親ウインドウに表示する）リンク先をA要素を用いて指定します。 サンプルでは３つのリンク先を用意しています。onclick属性値として関数「link」を指定し、引数にURLを記述します。
<a href="JavaScript:void(0)" onclick="link('sp57_1.html')">Menu -1-</a>
リンク先URL('sp57_1.html')
親ウインドウに表示するファイルのURLを子ウインドウのファイルに対する相対パスで指定します。 ここでは同一パスにある「sp57_1.html」を親ウインドウに表示するようにしています。

対応ブラウザ

IE4,IE5,NN4,N6

サンプル

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

[Go To Top]

ソース(親ウインドウ「sp57.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>

<script language="JavaScript">
<!--
function Init(suri,wid,hei){
	SWindow(suri,'menu',wid,hei,0,0,0,0,0,0);
}

function SWindow(Aurl,Aname,Awidth,Aheight,Atoolbar,Alocation,Astatus,Ascroll,Amenu,Aresize){
	Astr = "width=" + Awidth;
	Astr+= ",height=" + Aheight;
	if(Atoolbar)Astr+= ",toolbar";
	if(Alocation)Astr+= ",location";
	if(Astatus)Astr+= ",status";
	if(Ascroll)Astr+= ",scrollbars";
	if(Amenu)Astr+= ",menubar";
	if(Aresize)Astr+= ",resizable";
	window.open(Aurl,Aname,Astr);
}

// -->
</script>

</head>

<body onload="Init('sp57_0.html',150,350)">

<div style="font:bold 48pt cursive;color:#999;">
Main Window
</div>

</body>
</html>

ソース(子ウインドウ「sp57_0.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;
	color:				#66f;
}
a:hover{
	text-decoration:	underline;
	color:				#00f;
	background-color:	#ccf;
}
-->
</style>

<script language="JavaScript">
<!--
function Init(n){

	scrX = GetScreenSize("width");
	scrY = GetScreenSize("height");
	winX = GetWindowSize("width");
	winY = GetWindowSize("height");

	switch(n){
		case 1:
			x = 0;
			y = 0;
			break;
		case 2:
			x = scrX - winX;
			y = 0;
			break;
		case 3:
			x = scrX - winX;
			y = scrY - winY;
			break;
		case 4:
			x = 0;
			y = scrY - winY;
			break;
		default:
			x = 0;
			y = 0;
			break;
	}

	moveTo(x,y);
	window.focus();
}

function link(suri){
	window.opener.location.href = suri;
	window.focus();
}

function wclose(){
	window.close();
}

//スクリーンサイズ取得
function GetScreenSize(type){
	switch(type){
		case "width":
			return(screen.width);
		break;
		case "height":
			return(screen.height);
		break;
		default:
			return(-1);
		break;
	}
}

//ウインドウサイズ取得
function GetWindowSize(type){
	switch(type){
		case "width":
			if(document.all){
				return(document.body.clientWidth);
			}else if(document.layers){
				return(innerWidth);
			}else if(document.getElementById){
				return(innerWidth);
			}else{
				return(-1);
			}
		break;
		case "height":
			if(document.all){
				return(document.body.clientHeight);
			}else if(document.layers){
				return(innerHeight);
			}else if(document.getElementById){
				return(innerHeight);
			}else{
				return(-1);
			}
		break;
		default:
			return(-1);
		break;
	}
}

// -->
</script>

</head>

<body onload="Init(2)">

<div style="font-size:24pt;font-weight:bold;color:#f90;">
MENU
</div>

<div style="font-size:16pt;font-weight:bold;color:#00f;">
<a href="JavaScript:link('sp57_1.html')">Menu -1-</a><br>
<a href="JavaScript:link('sp57_2.html')">Menu -2-</a><br>
<a href="JavaScript:link('sp57_3.html')">Menu -3-</a><br>
<br>
<a href="JavaScript:void(0)" onclick="wclose()">CLOSE</a><br>
</div>

</body>
</html>

ソース(リンク先１「sp57_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>

</head>

<body>

<div style="font:bold 48pt cursive;color:#f00;">
CONTENT -1-
</div>

</body>
</html>

ソース(リンク先２「sp57_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>

</head>

<body>

<div style="font:bold 48pt cursive;color:#0f0;">
CONTENT -2-
</div>

</body>
</html>

ソース(リンク先３「sp57_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>

</head>

<body>

<div style="font:bold 48pt cursive;color:#00f;">
CONTENT -3-
</div>

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