《 4:30 PM 公開/更新》
JavaScriptでサブウインドウや新しいウインドウを開くには、window.open();を使います。openメソッドの引数に様々なオプションを記述することで、ウインドウサイズやロケーションバーの有無などを指定したサブウインドウを開くことができます。
JavaScriptを使うと、指定したサイズや表示位置など様々なオプションを指定して、サブウインドウを開くことができます。
サブウインドウを開くJavaScriptは非常に簡単で、以下のように記述するだけです。
window.open();
上記JavaScriptは、オプションを一切指定しておらず、表示先ページのURLすら指定していないので、ただ「新しいウインドウを開く」だけです。
以下のようにHTMLを書けば、「新しいウインドウを開く」ボタンを作れます。
<input type="button" value="新しいウインドウを開く" onclick="window.open();" />
これを表示すると、以下のような感じになります。
クリックすると、ブランクウインドウ(何も表示されていないウインドウ)が開きます。ただし、最近のタブブラウザでは「新しいウインドウ」ではなく「新しいタブ」が開きます。
昔々、まだブラウザにタブ機能がなかった時代は、この記述で新しいウインドウが開いていました。
openメソッドの第1引数には、表示するURLを指定できます。例えば以下のように。
window.open('https://www.nishishi.com/');
上記では、「https://」から始まるURLを指定していますが、相対パスでただHTMLファイル名を指定するのでも構いません。HTMLに限定するわけではないので、画像でも構いません。
先ほどと同様に、ボタンにすると以下のようになります。
クリックすると、新しいウインドウ(または新しいタブ)が開いて「https://www.nishishi.com/」が表示されます。
さて、これまではオプションを指定してこなかったので、新しいウインドウ(またはタブ)を開くだけでした。もっと細かくオプションを指定することで、様々な「サブウインドウ」を作ることができます。
それには、以下のようにJavaScriptを記述します。
window.open("URL","ウインドウ名","オプション群");
openメソッドには、上記のように3つの引数を指定できます。
「URL」は表示するページのURLを指定します。「ウインドウ名」は新しく開くウインドウの名称を何か適当に指定します。
「オプション群」には、下表のオプションを指定できます。
| オプション | 説明 |
|---|---|
width = 000 |
ウインドウの横幅（ピクセル数） |
height = 000 |
ウインドウの高さ（ピクセル数） |
top = 000 |
ウインドウ表示位置（上端からのピクセル数） |
left = 000 |
ウインドウ表示位置（左端からのピクセル数） |
titlebar = 1 |
タイトルバーの有無（1:あり／0:なし） |
menubar = 1 |
メニューバーの有無（1:あり／0:なし） |
toolbar = 1 |
ツールバーの有無（1:あり／0:なし） |
location = 1 |
ロケーションバーの有無（1:あり／0:なし） |
scrollbars = 1 |
スクロールバーの有無（1:あり／0:なし） |
status = 1 |
ステータスバーの有無（1:あり／0:なし） |
directories = 1 |
ディレクトリバーの有無（1:あり／0:なし） |
fullscreen = 1 |
フルスクリーンモードの有無（1:あり／0:なし） |
resizable = 1 |
ウインドウサイズ変更の可否（1:許可／0:禁止） |
上記のオプション群を自由に組み合わせて、第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");
これを表示させると、以下のように見えます。
まあこんな感じで、サブウインドウが開けます。(※末尾の備考もご参照下さい。)
オプションの組み合わせはいろいろあるので、いろいろ試してみて下さい。
なお、最近のブラウザでは、セキュリティ上の観点から、ロケーションバーを非表示にした場合は、ドメイン名がタイトルバーに表示されてしまいます。
それによって、本来のページタイトルが見えなくなったりするので、ロケーションバーはできるだけ表示させるようにした方がよいでしょう。
特に最近のブラウザは、元々のウインドウがとてもシンプルになっているので、上記のように各種オプションを指定しても、あまり表示に差がない場合もあります。「メニューバー」などは、ないのが最近の標準ですし。指定したものが「絶対に出る」とは考えずに、表示・非表示どちらでも構わないような形でデザインした方が良いでしょう。
()
▼このページに関連しそうな記事が約8本くらい自動表示されています。(たぶん)
