Presented by Nishishi via Movable Type. Last Updated: 2016/10/14. 13:32:50.

サブウインドウを開く

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

window.open();

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

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

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

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

リンク先URLを指定して新しいウインドウを開く

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を指定します。「ウインドウ名」は新しく開くウインドウの名称を何か適当に指定します。
「オプション群」には、下表のオプションを指定できます。

オプション説明
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");

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

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

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

※特に最近のブラウザは、元々のウインドウがとてもシンプルになっているので、上記のように各種オプションを指定しても、あまり表示に差がない場合もあります。「メニューバー」などは、ないのが最近の標準ですし。指定したものが「絶対に出る」とは考えずに、表示・非表示どちらでも構わないような形でデザインした方が良いでしょう。

JavaScript TIPS 主要なカテゴリ

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

  • イベント : JavaScriptを実行するトリガーとなるイベントに関するTIPS
  • 入力フォーム : JavaScriptで入力フォームを扱う方法に関するTIPS
  • 情報取得 : JavaScriptで様々な情報を得る方法に関するTIPS
  • 操作・移動 : JavaScriptでブラウザを操作したり表示ページを移動したりする方法に関するTIPS
  • 日付・時刻 : JavaScriptで日付や時刻を扱う方法に関するTIPS
  • 機能 : JavaScriptで何らかの機能を実現する方法に関するTIPS
  • 装飾・内容変更 : JavaScriptで装飾や内容を変更する方法に関するTIPS
  • 計算・変換 : JavaScriptで様々な計算や変換処理を行う方法に関するTIPS

▲各カテゴリ毎に、TIPSのタイトルと概要を一覧できます。ぜひ、いろいろ覗いてみて下さい!

関連書籍・関連ソフトなど