にしし ふぁくとりー(西村文宏 個人サイト)

"JavaScript Tips Factory" : Presented by Nishishi. Since 1997.

サブウインドウを開く方法 [機能]

JavaScriptでサブウインドウや新しいウインドウを開くには、window.open();を使います。openメソッドの引数に様々なオプションを記述することで、ウインドウサイズやロケーションバーの有無などを指定したサブウインドウを開くことができます。

JavaScriptでサブウインドウや新しいウインドウを開く方法

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

window.open();

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

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

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

クリックすると、ブランクウインドウ(何も表示されていないウインドウ)が開きます。ただし、最近のタブブラウザでは「新しいウインドウ」ではなく「新しいタブ」が開きます。
昔々、まだブラウザにタブ機能がなかった時代は、この記述で新しいウインドウが開いていました。

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

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」です。

小さなサブウインドウを開くボタンの記述例1

サブウインドウを開く機能をボタンとして作りたい場合は、例えば以下のように記述すれば良いでしょう。

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

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

押すと、サンプルページが小さなサブウインドウで表示されます。(※末尾の備考もご参照下さい。)

小さなサブウインドウを開くボタンの記述例2

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

  • メニューバーあり
  • ロケーションバーあり
  • ステータスバーあり
  • スクロールバーあり
  • サイズ変更可能

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

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

まあこんな感じで、サブウインドウが開けます。(※末尾の備考もご参照下さい。)
オプションの組み合わせはいろいろあるので、いろいろ試してみて下さい。

備考:

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

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

()

JavaScript TIPSふぁくとりーの主要なカテゴリ

下記のカテゴリに区分して、JavaScriptに関するTIPSを公開しています。カッコ内の数字は、該当する記事の件数です。

著者紹介


にしし(西村文宏)

にししでございます。本書いたり記事書いたりしてます。あと萌えたり。著書5冊発売中です(Web製作系4冊+小説1冊)。著書や記事は「西村文宏」名義。記事は主にAll Aboutで連載。本の最新刊は2011年3月に発売されたライトノベルでございますよ。

Twitter:にしし/西村文宏
にしし/西村文宏 on facebook にしし/西村文宏 on mixi にしし/西村文宏 on Google+ フォローはお気軽に!

にしし(西村文宏)連絡先
☕ コーヒーをおごる

著書一覧と詳細

関連するかもしれない情報など

▼このページに関連しそうな記事が約8本くらい自動表示されています。(たぶん)

--- 当サイト内を検索 ---