Index

新しいウィンドウ

　JavaScriptの実用的なTIPS集です。ここでは、新しいウィンドウをつくったり閉じたりする方法を扱います。タブブラウザの場合は、ユーザー側の設定に応じて、新しいウィンドウが新しいタブとして開かれることがあります。(IE 4以上 / NN 4以上)

[INDEX]	・既存のファイルを開く	... 新しいウィンドウに既存のHTMLファイルを読み込む。
	・ウィンドウを閉じる	... 開いたウィンドウを閉じるためのボタンを設置する。
	・新しいソースをつくって開く	... 新しいウィンドウをコードで記述して開く。
	・オプションを設定する	... 開くウィンドウに様々なオプションを設定する。

sasaraan programming

Exposition

■既存のファイルを開く

　新しいウィンドウを開く時は、window オブジェクトの open メソッドを利用します。ただし、ブラウザの設定によっては、新しいウィンドウの代わりに新しいタブが開きます。

window.open(url, name)　：　url ... ファイルのURL / name ... ウィンドウ名

　引数 url には読み込むファイルの URL を指定します。引数 name は、スクリプトで管理したり、他のウィンドウから制御するためのものです。必要のない時は空文字 "" を指定します。

// JavaScript ソース
function OpenWnd() {
      var sURL = "newwindow1.html";
      window.open(sURL, "");
}

<!-- HTML ソース -->
<form>
      <input type='button' value='新しいウィンドウ' onclick='OpenWnd()'/>
</form>

■ウィンドウを閉じる

　ウィンドウを閉じる時は、window オブジェクトの close メソッドを利用します。自分のウィンドウを閉じる時は、"window.close()" を記述するだけです。

window.close()

　ただし、他のウィンドウを閉じる時は、まず、開く時に window オブジェクトを取得（変数に代入）しておく必要があります。

var objWnd;　　　　　　　　　　// ウィンドウオブジェクト
objWnd = window.open( ... );
objWnd.close();

　条件文の window オブジェクトは、存在すれば true、存在しない時は false を返しますので、開いているかどうかのチェックも行うことができます。そして閉じる時に、代入したウィンドウオブジェクトの変数を使用します。

// JavaScript ソース
var objWnd;

function OpenWnd() {
      objWnd = window.open("newwindow1.html", "window1");
}

function CloseWnd() {
      if (objWnd) objWnd.close();
}

<!-- HTML ソース-->
<form>
      <input type='button' value='ウィンドウを開く' onclick='OpenWnd()'/>
      <input type='button' value='ウィンドウを閉じる' onclick='CloseWnd()'/>
</form>

■新しいソースをつくって開く

　HTMLファイルを用意せず、JavaScript のコードだけで新しいウィンドウをつくるサンプルです。

objWnd.document.write(str)　：　objWnd...ウィンドウオブジェクト / str...書き出す文字列

　開く時にウィンドウオブジェクトを取得して空のウィンドウをつくってから、通常省略する "window" の代わりにウィンドウオブジェクトの変数を利用して document オブジェクトにアクセスしてからタグを書き出します。なお、他のウィンドウに document オブジェクトで書き出すときは、最後に close メソッドで閉じる必要があります。

// JavaScript ソース
function OpenWnd() {
      var oWindow = window.open("", ""); 
      with (oWindow.document) {
            write("<html>");
            write("<head>");
            write("<title>New Window<\/title>");
            write("<\/head>");
            write("<body>");
            write("<h1>Hello New World !<\/h1>");
            write("<hr>");
            write("<input type='button' value='Close' onclick='window.close()'>");
            write("<\/body>");
            write("<\/html>");
            close(); 
      }
}

<!-- HTML ソース-->
<form>
      <input type='button' value='新しいウィンドウ' onclick='OpenWnd()'>
</form>

■オプションを設定する

　新しいウィンドウを開く時、サイズやコントロールバーなどのオプションを設定することができます。この時は、open メソッドの三番目の引数に値となる文字列を指定します。前節まで省略してきたように、オプションを指定する三番目の引数は省略可能です。

window.open(url, name, options)
　：　url...ファイルのURL / name...ウィンドウ名 / options...オプション

　主なオプションには以下のような種類があります。ブラウザによって初期値が違うので、設定が必要な時は記述しておいた方が安全です。なお、複数の値を設定する時は、一つの文字列の中でカンマで区切って指定します。

option	function	value
left	スクリーンの左端からの距離の指定（px単位）	（数値）
top	スクリーンの上端からの距離の指定(px単位)	（数値）
width	ウィンドウの幅の指定(px単位)	（数値）
height	ウィンドウの高さの指定(px単位)	（数値）
fullscreen	フルスクリーンに設定	yes(1), no(0)
resizable	可変ウィンドウに設定	yes(1), no(0)
directories	ディレクトリバーの表示	yes(1), no(0)
location	ロケーションバーの表示	yes(1), no(0)
menubar	メニューバーの表示	yes(1), no(0)
scrollbars	スクロールバーの表示	yes(1), no(0)
status	ステータスバーの表示	yes(1), no(0)
titlebar	タイトルバーの表示	yes(1), no(0)
toolbar	ツールバーの表示	yes(1), no(0)

// JavaScript ソース
function OpenWnd() {
      var sURL = "newwindow1.html";
      var sName = "Window1"
      var sOptions = "width=320, height=240, resizable=1, status=0, toolbar=1"
      window.open(sURL, sName, sOptions);
}

<!-- HTML ソース-->
<form>
      <input type='button' value='新しいウィンドウ' onclick='OpenWnd()'>
</form>