Windowオブジェクトウィンドウ名の取得・設定／ウィンドウの開閉／ウィンドウの存在有無確認
- ウィンドウ名の設定・取得
- ウィンドウの存在有無を確認
- ウィンドウを閉じる
- 新ウィンドウを開く〔ウィンドウサイズ、表示位置、オプション指定〕
- 画像サイズぴったりのウィンドウを開く〔サムネイル画像クリック→新ウィンドウに実寸表示〕
- 新ウィンドウをリンクで開く〔JavaScript無効のユーザー対策〕
- ウィンドウが開かれた親ウィンドウを示す
- 現在のページを印刷する
- 新ウィンドウを開く（ウィンドウ内に表示するHTML指定）
ウィンドウ名の設定・取得
unknown
ウィンドウには任意の名前を付けられます。 「ウィンドウ名」を取得するには、ウィンドウオブジェクトを変数に格納する必要があります。 ウィンドウオブジェクトを変数に格納することで、特定のウィンドウを操作が可能になります。
「ウィンドウ名」と「ウィンドウオブジェクトを格納する変数名」は同じでなくてかまいません。
<script type="text/javascript">
function windowOpen1(WindowName){
/* ウィンドウを変数（ここではwinという名の変数）に格納 */
var win=window.open("/content/demo/sample.html", WindowName);
/* ウィンドウを格納した変数名.name でウィンドウ名を取得できます */
alert("ウィンドウの名前は「"+win.name+"」です");
/* 開いたウィンドウにフォーカスを当てる */
win.focus();
}
</script>
<a href="javascript:windowOpen1('hogehoge');">ウィンドウ名の設定・取得</a>
ウィンドウの存在有無を確認
unknown
closedプロパティは、ウィンドウが閉じられている場合にTRUE、まだ閉じられていない場合にFALSEを返します。
新しいウィンドウを同一ウィンドウ内に開くには、ウィンドウに名前を付けます。
また、変数名.closedでウィンドウの存在有無を確認できるように、window.open()メソッド開いたウィンドウオブジェクトを変数に格納しておきます。
※「ウィンドウ名」と「ウィンドウオブジェクトを格納する変数名」は、同じでなくてかまいません。
ウィンドウの存在確認をしてからウィンドウを開くには、まずclosedプロパティで指定した名前のウィンドウが閉じられているかを調べ、 まだ閉じられていない（FALSE）ならそのウィンドウにフォーカスを当て、 既に閉じられている（TRUE）なら、新しくウィンドウを開くようにすればOKです。
ウィンドウオブジェクトを変数に格納しても、ウィンドウ名の指定がないとwindow.open()メソッドをコールするたびに新ウィンドウが開かれますので注意してください。
<script type="text/javascript">
function NewWin() {
/* ウィンドウオブジェトを格納する変数 */
var win;
/* ウィンドウの存在確認をしてからウィンドウを開く */
if( !win || win.closed ) {
/*
ウィンドウオブジェクトを格納した変数が存在しない、
ウィンドウが存在しない、ウィンドウが閉じられている
場合は、新ウィンドウを開く。
*/
win = window.open( "http://www.google.co.jp/","sample");
}else{
/*
既にウィンドウが開かれている場合は
そのウィンドウにフォーカスを当てる。
*/
win.focus();
}
}
</script>
<a href='javascript:NewWin();'>ウィンドウを開く（ウィンドウの存在確認あり）</a>
ウィンドウを閉じる
unknown
window.self.close();
ウィンドウを閉じるには、close()メソッドを使用します。
selfは、ウィンドウ自身を指します。
window.close();、self.close();は処理としてはどちらも同じです。
ウィンドウをJavaScriptで閉じようとすると、ブラウザやブラウザの設定環境によって下図のようなアラートが表示される場合があります。 はいを選択するとウィンドウが閉じられ、いいえを選択すると元の画面に戻ります。
<p>■リンク：
<a href="javascript:void(0)" onclick="window.close();">閉じる</a>
<a href="javascript:void(0)" onclick="window.self.close();">閉じる(self使用）</a>
</p>
<p>
■通常のボタン：
<input type="button" value="閉じる" onclick="window.close();" />
</p>
<p>
■画像ボタン：
<input type="image" src='/content/img/btn/btn_close.gif' onclick="window.close();" style="vertical-align:middle" />
</p>
<p>
■画像リンクボタン：
<a href='javascript:window:close();'><img src='/content/img/btn/btn_close.gif' border="0" width="42" height="11" alt="閉じる" style="vertical-align:middle;" /></a>
</p>
新ウィンドウを開く
ウィンドウサイズ、表示位置、オプション指定
unknown
ウィンドウを開くにはopen()メソッドを使用します。
URLには、ウィンドウに表示するWebページへのパス（絶対or相対パス）を指定します。 URLを省略した場合は、about:blank;（空ウィンドウ）が表示されます。
オプションの第2引数ウィンドウ名を指定すると、何度もウィンドウを開く場合、同一ウィンドウ内にウィンドウを開くことができます。 指定しない場合は、window.open()メソッドをコールする度に、新ウィンドウが立ち上がります。
オプションの第3引数オプション値は、ウィンドウの大きさ、開く位置、表示するバーなどを細かく指定できます。 指定しない場合は、通常の状態で表示されます。ただし、1つでもオプション値を指定した場合、指定されてないオプションは全てno（非表示）が指定されたものとみなされます。
| オプション | 指定値 | 内容 |
|---|---|---|
| width | ピクセル指定 | ウィンドウの横幅 |
| height | ピクセル指定 | ウィンドウの高さ |
| directories | yes/no または 1/0 | ディレクトリバーの表示/非表示（リンクなど） |
| location | yes/no または 1/0 | ロケーションバーの表示/非表示（アドレス） |
| menubar | yes/no または 1/0 | メニューバーの表示/非表示（ファイル、編集など） |
| resizable | yes/no または 1/0 | ウィンドウサイズの変更可/変更不可 |
| scrollbars | yes/no または 1/0 | スクロールバーの表示/非表示 |
| status | yes/no または 1/0 | ステータスバーの表示/非表示 |
| toolbar | yes/no または 1/0 | ツールバーの表示/非表示（戻る、進むなどの標準ボタン） |
シンプルな記述例
<script type="text/javascript">
function winOpen(){
/*
ウィンドウ名を指定していないため、関数がコールされる度に
新ウィンドウが開きます。
*/
window.open("http://www.google.co.jp/");
}
</script>
<a href='javascript:winOpen();'>ウィンドウを開く（URLのみ指定）</a>
<br>
<script type="text/javascript">
function winOpenN(){
/*
ウィンドウ名を指定すると、関数が何度コールされようと、
既に同じ名前のウィンドウがあれば、そのウィンドウ内に表示されます。
（開かれるウィンドウは1つのみ）
*/
window.open("http://www.google.co.jp/","sample");
}
</script>
<a href='javascript:winOpenN();'>ウィンドウを開く（URL、ウィンドウ名指定）</a>
ウィンドウサイズ＋表示位置指定
以下の例は、ウィンドウの幅（400px）、ウィンドウの高さ（300px）、画面上左端位置（top=0, left=0）にウィンドウを開きます。
<script type="text/javascript">
var win;
function winOpen1(url,window_name,width,height,top,left){
var opt="width="+width+",height="+height+",top="+top+",left="+left;
window.open(url,window_name,opt);
}
</script>
<a href="javascript:winOpen1('http://www.google.co.jp/','sample',400,300,0,0);">ウィンドウを開く（ウィンドウサイズ＋表示位置指定）</a>
ウィンドウサイズ＋表示位置＋オプション指定く
<script type="text/javascript">
/* ウィンドウオブジェクトを格納する変数名 */
var win2;
/* オプション値の配列 */
var opt_ary = new Array(9);
/* 表示（1）、非表示（0）*/
opt_ary["directories"]=0;
opt_ary["location"]=0;
opt_ary["menubar"]=0;
opt_ary["resizable"]=1;
opt_ary["scrollbars"]=1;
opt_ary["status"]=1;
opt_ary["toolbar"]=1;
/* 0を指定した場合は省略 */
opt_ary["top"]=100;
opt_ary["left"]=0;
opt_ary["width"]=500;
opt_ary["height"]=400;
function winOpen2(url,window_name){
var opt="";
opt+=(opt_ary["directories"]==1)?"directories=1,":"";
opt+=(opt_ary["location"]==1)?"location=1,":"";
opt+=(opt_ary["menubar"]==1)?"menubar=1,":"";
opt+=(opt_ary["resizable"]==1)?"resizable=1,":"";
opt+=(opt_ary["scrollbars"]==1)?"scrollbars=1,":"";
opt+=(opt_ary["status"]==1)?"status=1,":"";
opt+=(opt_ary["toolbar"]==1)?"toolbar=1,":"";
opt+=(opt_ary["top"]>0)?"top="+opt_ary["top"]+",":"";
opt+=(opt_ary["left"]>0)?"left="+opt_ary["left"]+",":"";
opt+=(opt_ary["width"]>0)?"width="+opt_ary["width"]+",":"";
opt+=(opt_ary["height"]>0)?"height="+opt_ary["height"]+",":"";
if(!win2 || win2.closed){
win2 = window.open(url,window_name,opt);
}else{
/* 既にウィンドウが開いている場合はフォーカスを当てる */
win2.focus();
}
}
</script>
<a href="javascript:winOpen2('http://www.google.co.jp/','sample2');">ウィンドウを開く（オプション指定）</a>
画像サイズぴったりのウィンドウを開く
サムネイル画像クリック→新ウィンドウに実寸表示
unknown
ポイントは、以下の2点。
- ウィンドウサイズを画像と同じ幅・高さに指定する。
- ウィンドウ内に書き出すHTML文のbody要素の余白をゼロにする。
<body style='margin:0; padding:0;'>
以下の例では、画像クリックでウィンドウを閉じるようにしていますが、閉じるボタンなどを表示させる場合は、ウィンドウの高さにその分をプラスして下さい。
<script type="text/javascript">
function JustSizeWindow(img,width,height){
/* ウィンドウを開く位置、ウィンドウサイズを指定 */
var opt = "";
opt+='top=0,left=0';
opt+=',width='+width+',height='+height+',';
opt+='directories=0,toolbar=0,menubar=0,scrollbars=0,status=0,resizable=0';
/* 新ウィンドウを開く */
jsw=window.open('','jsw',opt);
/* 新ウィンドウにフォーカスを当てる */
jsw.focus();
/* 新ウィンドウにドキュメントを書出 */
jsw.document.open();
htm = '<html><head>';
htm+='<meta http-equiv="Content-Type" content="text/html; charset=utf-8">';
htm+='<title>画像サンプル<\/title>';
htm+='<\/head>';
/* body要素の余白をゼロに指定 */
htm+='<bod' + 'y style="margin:0; padding:0;">';
/* 画像をクリックすると、ウィンドウを閉じるようにする */
htm+='<a href="javascript:window.close();">';
htm+='<img src="'+img+'" width="'+width+'" height="'+height+'" border="0" alt="画像をクリックするとウィンドウを閉じます">';
htm+='<\/a>';
htm+='<\/bod'+'y><\/html>';
jsw.document.write(htm);
jsw.document.close();
}
</script>
<!-- 画像をクリックすると拡大画像を別ウィンドウに表示する -->
<a href="javascript:JustSizeWindow('/content/img/pic1.png',320,240)"><img src="/content/img/pic1-thumb.png" width="120" height="90" border="0" alt="画像をクリックすると拡大画像を別ウィンドウに表示" /></a>
新ウィンドウをリンクで開く
JavaScript無効のユーザー対策
unknown
onclickイベントに指定した処理でウィンドウを開きます。
onclickイベントの最後にreturn false;を指定しfalseを返しているのは、JavaScriptが有効な場合にa要素のhref属性の指定を無視するためです。
JavaScriptが無効な場合は、onclickイベントに指定した処理は無視されるため、a要素のhref属性で指定したURLへ移動します。
a要素のtarget属性に、_blankを指定した場合は新ウィンドウが開き、_selfを指定した場合は、同一ウィンドウ内に開かれます。
<script type="text/javascript">
function winOpen5(){
alert("JavaScriptが有効なのでonclickイベントに指定した処理（ウィンドウを開く）を実行します");
window.open("http://www.google.co.jp/");
}
</script>
<p>
JavaScriptが有効の場合にはonclickイベントに記述した処理が実行され、
無効の場合にはaタグのhref属性で指定したURLへ移動します。
</p>
<p>
<a href="http://www.google.co.jp/" target="_blank" onclick="winOpen5(); return false;">ウィンドウを開く</a>
</p>
ウィンドウが開かれた親ウィンドウを示す
unknown
openerプロパティは、ウィンドウ（自分自身）が開かれた親ウィンドウを示します。 子ウィンドウにフォーカスがあたっている間に、裏で親ウィンドウを操作することができます。
<form action="#" name="parentfrm">
<p><input type="button" value="ウィンドウを開いて、親ウィンドウを示す" onclick="fOpener()" /></p>
<p><input type="text" name="txt" size="50" /></p>
</form>
<script type="text/javascript">
var mySelfWindow;
function fOpener(){
mySelfWindow=window.open("","","width=400,height=200")
mySelfWindow.document.write("このウィンドウは、自分自身です。")
mySelfWindow.focus()
mySelfWindow.opener.document.parentfrm.txt.value="これは自分自身を開いた親ウィンドウです";
}
</script>
現在のページを印刷する
unknown
現在のページを印刷するには、printメソッドを使用します。 ブラウザの印刷ボタンをクリックしたのと同じ処理で、印刷ダイアログが表示されます。
<form action="#">
<input type="button" value="このページを印刷" onclick="fPrint()" />
</form>
<script type="text/javascript">
function fPrint(){
window.print();
}
</script>
新ウィンドウを開く（ウィンドウ内に表示するHTML指定）
unknown
window.document.write("コンテンツ");
window.document.close();
<script type="text/javascript">
function fCreateOpen(htmlStr){
var win=window.open("","win","top=0,width=300,height=200,left=0,location=1,status=1");
win.document.open();
win.document.write(htmlStr);
win.document.close();
win.focus();
}
</script>
<a href="javascript:fCreateOpen('<html><head><meta http-equiv=\'content-type\' content=\'text/html; charset=utf-8\'><title>サンプル</title></head><bo'+'dy style=\'background-color:#ffff88; text-align:center; font-size:small;\'><strong>サンプルテキスト</strong><p><img src=\'/content/img/dog_white.gif\' alt=\'Dog\'></p><p><a href=\'javascript:self.close();\'>ウィンドウを閉じる</a></p></bo'+'dy></html>');">ウィンドウを開く（ウィンドウ内に表示するHTML指定）</a>
;\'>ウィンドウを閉じる</a></p></bo'+'dy></html>');){kind=link}