SITEMAP [初めてのホームページ講座] [JavaScript , DHTML] [ちびウインドウ]
Dynamic HTMLの参考書 Java Scriptの参考書

ちびウインドウ

機能

アンカーをクリックすると、小さなウインドウが開く、こういうサイトに出くわしたことが多いことでしょう。 そのウインドウにはツールバーやメニューバーなどが何も表示されずに、しかもリサイズも出来ない、そういう場合もあるでしょう。 それを１つのスクリプトで簡単に実現できるようにしたものです。 たいしたスクリプトではないのですが、案外知らない方が多いようなのでサンプルに追加しました。

類似サンプル

  1. ウインドウリサイズ
  2. ウインドウリムーブ
  3. FULL SCREEN SCRIPT
  4. ウィンドウコントローラ

利用方法

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

A要素にHREF属性でリンク先を指定するのが普通ですが、ここではサンプルのように 「HREF="JavaScript:SWindow(A,B,C,D,E,F,G,H,I,J)"」を指定します。 ここで、A〜Jは下表の通りですが、指定する（変数の）型に注意して下さい。 文字列は「'」で括ります。（下表参照）

実際に使用する場合は「サンプル２」を、 試しに見てみたい場合は「サンプル１」をお奨めします。

下表はサンプル２つで使用している関数「SWindow」の使用方法です。 これらをアンカーなどからイベント処理を使用してコールすると楽です。

記号 内容 型
A 開く先のURLを指定 文字列
B ウインドウ名を指定 文字列
C ウインドウの幅をピクセルで指定 文字列
D ウインドウの高さをピクセルで指定 文字列
E ツールバーの有無(0=無し,1=有り) 論理型(「0」or「1」)
F ロケーターの有無(0=無し,1=有り) 論理型(「0」or「1」)
G ステータスバーの有無(0=無し,1=有り) 論理型(「0」or「1」)
H スクロールバーの有無(0=無し,1=有り) 論理型(「0」or「1」)
I メニューバーの有無(0=無し,1=有り) 論理型(「0」or「1」)
J リサイズの有無(0=無し,1=有り) 論理型(「0」or「1」)

これを使った例として下表のようなことが可能です。実際に見て下さい。

NO C.幅 D.高さ E.ツールバー F.ロケーター G.ステータスバー H.スクロールバー I.メニューバー J.リサイズ 　
1 550 80 無し 無し 無し 無し 無し 無し 見る
2 550 80 無し 無し 無し 無し 無し 有り 見る
3 550 80 無し 無し 無し 無し 有り 有り 見る
4 550 80 無し 無し 無し 有り 有り 有り 見る
5 550 80 無し 無し 有り 有り 有り 有り 見る
6 550 80 無し 有り 有り 有り 有り 有り 見る
7 550 80 有り 有り 有り 有り 有り 有り 見る

上表の「見る」部分には下表のようなHREF属性が指定されています。

NO HREF="JavaScript:SWindow(A,B,C,D,E,F,G,H,I,J)"
1 HREF="JavaScript:SWindow('../sample/image/maintitle.gif','chibi','550','80',0,0,0,0,0,0)"
2 HREF="JavaScript:SWindow('../sample/image/maintitle.gif','chibi','550','80',0,0,0,0,0,1)"
3 HREF="JavaScript:SWindow('../sample/image/maintitle.gif','chibi','550','80',0,0,0,0,1,1)"
4 HREF="JavaScript:SWindow('../sample/image/maintitle.gif','chibi','550','80',0,0,0,1,1,1)"
5 HREF="JavaScript:SWindow('../sample/image/maintitle.gif','chibi','550','80',0,0,1,1,1,1)"
6 HREF="JavaScript:SWindow('../sample/image/maintitle.gif','chibi','550','80',0,1,1,1,1,1)"
7 HREF="JavaScript:SWindow('../sample/image/maintitle.gif','chibi','550','80',1,1,1,1,1,1)"

対応ブラウザ

IE3,NN3以上

サンプル１

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>

<HEAD>

<META HTTP-EQUIV="Content-Type" CONTENT="text/html;charset=Shift_JIS">
<META HTTP-EQUIV="Content-Script-Type" CONTENT="text/javascript">
<TITLE>ちびウインドウ</TITLE>

<SCRIPT LANGUAGE="JavaScript">
<!--
function SForm(){
	A = document.winnum.Furl.value;
	B = document.winnum.Fname.value;
	C = document.winnum.Fwidth.value;
	D = document.winnum.Fheight.value;
	E = document.winnum.Ftoolbar[0].checked;
	F = document.winnum.Flocation[0].checked;
	G = document.winnum.Fstatus[0].checked;
	H = document.winnum.Fscroll[0].checked;
	I = document.winnum.Fmenu[0].checked;
	J = document.winnum.Fresize[0].checked;
	SWindow(A,B,C,D,E,F,G,H,I,J);
}

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>

<FORM NAME="winnum">
<TABLE>
<TR>
	<TD>URL</TD>
	<TD><INPUT TYPE="text" NAME="Furl" VALUE="image/maintitle.gif"></TD>
</TR>
<TR>
	<TD>NAME</TD>
	<TD><INPUT TYPE="text" NAME="Fname" VALUE="chibi"></TD>
</TR>
<TR>
	<TD>幅</TD>
	<TD><INPUT TYPE="text" NAME="Fwidth" VALUE="550"></TD>
</TR>
<TR>
	<TD>高さ</TD>
	<TD><INPUT TYPE="text" NAME="Fheight" VALUE="80"></TD>
</TR>
<TR>
	<TD>ツールバー</TD>
	<TD>
		<INPUT TYPE="radio" NAME="Ftoolbar" VALUE="1" CHECKED>有り
		<INPUT TYPE="radio" NAME="Ftoolbar" VALUE="0">無し
	</TD>
</TR>
<TR>
	<TD>ロケーター</TD>
	<TD>
		<INPUT TYPE="radio" NAME="Flocation" VALUE="1" CHECKED>有り
		<INPUT TYPE="radio" NAME="Flocation" VALUE="0">無し
	</TD>
</TR>
<TR>
	<TD>ステータスバー</TD>
	<TD>
		<INPUT TYPE="radio" NAME="Fstatus" VALUE="1" CHECKED>有り
		<INPUT TYPE="radio" NAME="Fstatus" VALUE="0">無し
	</TD>
</TR>
<TR>
	<TD>スクロールバー</TD>
	<TD>
		<INPUT TYPE="radio" NAME="Fscroll" VALUE="1" CHECKED>有り
		<INPUT TYPE="radio" NAME="Fscroll" VALUE="0">無し
	</TD>
</TR>
<TR>
	<TD>メニューバー</TD>
	<TD>
		<INPUT TYPE="radio" NAME="Fmenu" VALUE="1" CHECKED>有り
		<INPUT TYPE="radio" NAME="Fmenu" VALUE="0">無し
	</TD>
</TR>
<TR>
	<TD>リサイズ</TD>
	<TD>
		<INPUT TYPE="radio" NAME="Fresize" VALUE="1" CHECKED>有り
		<INPUT TYPE="radio" NAME="Fresize" VALUE="0">無し
	</TD>
</TR>
<TR>
	<TD COLSPAN="2"><INPUT TYPE="button" NAME="Fok" VALUE="ちびウインドウ" ONCLICK="SForm()"></TD>
</TR>
</TABLE>
</FORM>

<P>リトライするときは開いたウインドウを閉じて下さい</P>

</BODY>
</HTML>

サンプル２

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>

<HEAD>

<META HTTP-EQUIV="Content-Type" CONTENT="text/html;charset=Shift_JIS">
<META HTTP-EQUIV="Content-Script-Type" CONTENT="text/javascript">
<TITLE>ちびウインドウ</TITLE>

<SCRIPT LANGUAGE="JavaScript">
<!--
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>

<P>
<A HREF="JavaScript:SWindow('image/maintitle.gif','chibi','550','80',0,0,1,0,0,1)">
ちびウインドウを開く（ステータスバー、リサイズ有り）
</A>
</P>

</BODY>
</HTML>
[Go To Top]
Last modified Nov,2000
Copyright(C)1999 T.Miyazaki , All Rights Reserved.