新規のウィンドウを開く

2015年10月29日

windowオブジェクトは、Webブラウザが自動的に生成するオブジェクトです。Webブラウザで新たなwindowを開いてHTMLロードすると、それが個別のウィンドウオブジェクトとなります。

javaScriptから直接windowオブジェクトを生成することもできます。プログラムを使って新たなwindowを開くこともできます。

サンプルコードの実行結果はこちら

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>windowを開く</title>

<script>
function openWin(){
    //新しくウィンドウを開く
    var win = window.open("","",
        "resizable=yes, width=600,height=300");

    //documentオブジェクトを開く
    win.document.open();

    //画像を表示する
    win.document.write("<img src='test.png'");
    
    //フォームを表示
    win.document.write("<form></p>");
    win.document.write('<input type="button" value="CLOSE"');
    win.document.write('onclick="window.close()">');
    win.document.write("</p></form>");

    //documentオブジェクトを閉じる
    win.document.close();
}

</script>

</head>
<body>

<form name="test"><p>
    <input type="button" value="OPEN" 
           name="openBtn" onclick="openWin()">    
</p></form>    
<script>


</script>
</body>
</html>

<!doctype html>

<html>

<head>

<title>windowを開く</title>

function openWin(){

//新しくウィンドウを開く

var win = window.open("","",

"resizable=yes, width=600,height=300");

//documentオブジェクトを開く

win.document.open();

//画像を表示する

win.document.write("<img src='test.png'");

//フォームを表示

win.document.write("<form></p>");

win.document.write('<input type="button" value="CLOSE"');

win.document.write('onclick="window.close()">');

win.document.write("</p></form>");

//documentオブジェクトを閉じる

win.document.close();

}

</script>

</head>

<body>

<input type="button" value="OPEN"

name="openBtn" onclick="openWin()">

</p></form>

</script>

</body>

</html>

既存のWebページをロードする

新規でウィンドウを作成するには、windowオブジェクトのopenメソッドをします。その戻り値は、生成されたwindowオブジェクトです。最初の引数にはURLを指定し、2番目の引数にはウィンドウ名を指定しますが、通常は空の文字列「""」で大丈夫です。3ば㎜根の引数には、オプションをカンマで区切って指定します。

　var win = window.open("","",
　　"resizable=yes, width=600,height=300");

1 2	var win = window.open("","", 　　"resizable=yes, width=600,height=300");

今回は、オプションに「resizable=yes」を指定しています。これでウィンドウサイズを変更できるようになります。「width」,「height」には、ウィンドウ幅、高さをピクセル数で指定します。

openメソッドのオプション

色々なものがあります。

オプション	設定値	説明
menubar	yes または no	メニューバーを表示するか
resizable	yes または no	ウィンドウサイズを可変にするか否か
scrollbars	yes または no	スクロールバーを表示するか否か
status	yes または no	ステータスバーを表示するか否か
toolbar	yes または no	ツールバーを表示するか否か
width	ピクセル値	ウィンドウの幅
height	ピクセル値	ウィンドウの高さ

ダイアログボックスに複数行の文字列を表記する

ダイアログボックスを表示するalert,propmtメソッドで、複数表の文字列を表記したい場合どうすればいいのか。結論だけを先にいうと以下のように書きます。

　var str = "javaScriptを\nカフェで\n勉強しています。";
　alert( str );

1 2	var str = "javaScriptを\nカフェで\n勉強しています。"; 　alert( str );

改行したい箇所で「\n」と書きます。