サブウインドウを開く

2007年5月26日(土) 12時32分02秒 [機能]

JavaScriptを使うと、指定したサイズや表示位置など様々なオプションを指定して、サブウインドウを開くことができます。
サブウインドウを開くJavaScriptは非常に簡単で、以下のように記述するだけです。

window.open();

上記JavaScriptは、オプションを一切指定しておらず、表示先ページのURLすら指定していないので、ただ「新しいウインドウを開く」だけです。
以下のようにHTMLを書けば、「新しいウインドウを開く」ボタンを作れます。

<input type="button" value="新しいウインドウを開く" onclick="window.open();" />

これを表示すると、以下のような感じになります。

クリックすると、ブランク（何も表示されていない）ウインドウが開きます。（タブブラウザだと、新しいウインドウではなく、新しいタブが開きます。）

openメソッドの第1引数には、表示するURLを指定できます。例えば以下のように。

window.open('http://www.nishishi.com/');

上記では、「http://」から始まるURLを指定していますが、相対パスでただHTMLファイル名を指定するのでも構いません。HTMLに限定するわけではないので、画像でも構いません。
先ほどと同様に、ボタンにすると以下のようになります。

クリックすると、新しいウインドウ（または新しいタブ）が開いて「http://www.nishishi.com/」が表示されます。

さて、これまではオプションを指定してこなかったので、新しいウインドウ（またはタブ）を開くだけでした。もっと細かくオプションを指定することで、様々な「サブウインドウ」を作ることができます。
それには、以下のようにJavaScriptを記述します。

window.open("URL","ウインドウ名","オプション群");

openメソッドには、上記のように3つの引数を指定できます。
「URL」は表示するページのURLを指定します。「ウインドウ名」は新しく開くウインドウの名称を何か適当に指定します。
「オプション群」には、下表のオプションを指定できます。

上記のオプション群を自由に組み合わせて、第3引数に指定します。（ブラウザによっては、使えないオプションもあります。その場合は、その指定が無視されるだけです。）
複数のオプションを指定する場合は、半角カンマで区切ります。
例えば、以下のように。

window.open("sample.html","sakura","width=360,height=240");

上記では、「sample.html」というページを表示するサブウインドウを、横幅360px・高さ240pxで表示します。サブウインドウの名称は「sakura」です。
ボタンにする場合は、以下のように記述します。

<input type="button" value="サブウインドウを開くよー" onclick="window.open('sample.html','sakura','width=360,height=240');

上記のように、HTML中に含める場合は、openメソッド内の引用符を「ダブルクオーテーション」ではなく「シングルクオーテーション」にする必要があるので注意して下さい。
（HTMLの属性値をダブルクオーテーションで囲んでいるため。）

上記のHTMLを表示すると、以下のように見えます。

かなりシンプルなサブウインドウになるので、以下のオプションを加えてみます。

window.open("sample.html","sakura","width=360, height=240, menubar=1, location=1, status=1, scrollbars=1, resizable=1");

これを表示させると、以下のように見えます。

まあこんな感じで、サブウインドウが開けます。
オプションの組み合わせはいろいろあるので、いろいろ試してみて下さい。

なお、最近のブラウザでは、セキュリティ上の観点から、ロケーションバーを非表示にした場合は、ドメイン名がタイトルバーに表示されてしまいます。
それによって、本来のページタイトルが見えなくなったりするので、ロケーションバーはできるだけ表示させるようにした方がよいでしょう。

前後のエントリ
< 旧／新 >

著者紹介

現在、以下のカテゴリに区分してTIPSを公開しています。