window.open()で小窓

いわゆる小窓です。これはJavaScriptの window.open() というメソッドで 小窓となるウィンドウを生成します。

window.open( URL, ウィンドウ名 [,オプション] )

各引数の文字列は一重引用符または二重引用符で括って指定します。

第１引数「URL」は生成されるウィンドウに表示するページのURLです。
※ ウィンドウに表示するページ（別のファイル）は別途作成して用意しておきます。

第２引数「ウィンドウ名」は特に指定する必要がなければ null で良いでしょう。 ウィンドウ名を指定するときは引用符で括ります。
※ null を指定するとウィンドウ名の設定されていない新規ウィンドウとなります。 (HTMLの属性 target="_blank" と同等です)
例: window.open('example.html', null);

第３引数「オプション」はウィンドウの特徴を設定する文字列です。 この文字列は複数のパラメーターをカンマで区切って指定しますので、 一重引用符または二重引用符で括る部分を間違えないよう注意が必要です。 オプションを省略すると単にブラウザの新規ウィンドウと同様になります。

パラメーターは他にも各ブラウザ独自のものなどありますが、 主要なものは次の通りです。

パラメーター値意味
width数値ウィンドウ幅
height数値ウィンドウ高さ
left数値ウィンドウ位置左
top数値ウィンドウ位置上
menubaryes/noメニューバー有無
toolbaryes/noツールバー有無
locationyes/noアドレスバー有無
statusyes/noステータスバー有無
resizableyes/noリサイズ可否
scrollbarsyes/noスクロールバー有無

※ 値はの数値はピクセル値です。
※ ウィンドウの位置はデスクトップ画面の左上からの数値です。

window.open()の戻り値は、ウィンドウの生成に成功したときは 生成されたウィンドウオブジェクト、失敗したときは null となります。

次の例は上手く動作しません。（一部のブラウザを除く） 小窓のウィンドウが開いた後、ウィンドウを呼び出したページは javascript:window.open(・・・);を表示しようとしてしまいます。

テスト１ （小窓で開きますが不具合有り）

<a href="javascript:window.open('example.html', 'mywindow1', 'width=400, height=300, menubar=no, toolbar=no, scrollbars=yes');">テスト１</a>
※ KHTMLなKonquerorでは、この不具合は出ないようです。(Safariは未確認)

次のようにファンクションとして定義して呼び出すか void() で括って値を返さない ようにすると上手く動作します。

テスト２ （小窓で開きます）
テスト３ （小窓で開きます）

<script type="text/javascript"><!--
function t2_win() {
window.open('example.html', 'mywindow2', 'width=400, height=300, menubar=no, toolbar=no, scrollbars=yes');
}
// --></script>

<a href="javascript:t2_win();">テスト２</a>
<a href="javascript:void(window.open('example.html', 'mywindow3', 'width=400, height=300, menubar=no, toolbar=no, scrollbars=yes'));">テスト３</a>

もしくは次のようにonclickイベントで window.open() を呼び出し、 href属性にはダミーとして javascript:void(0); や # などを指定すると 上手く動作します。 但し、 # の場合、小窓を呼び出したページは先頭に移動してしまいます。

テスト４（小窓で開きます）
テスト５（小窓で開きます）

<a href="javascript:void(0);" onclick="window.open('example.html', 'mywindow4', 'width=400, height=300, menubar=no, toolbar=no, scrollbars=yes');">テスト４</a>
<a href="#" onclick="window.open('example.html', 'mywindow5', 'width=400, height=300, menubar=no, toolbar=no, scrollbars=yes');">テスト５</a>

※ aタグにhref属性を使用せずにカーソルの形状をスタイル指定(cursor:pointer)して、 onclickで小窓を生成する方法もあります。 これは、spanなど別の要素のタグでも同様に出来ます。

しかし、上記の例ではいずれもJavaScriptを無効にしている環境や、JavaScriptが 搭載されていないブラウザなどでは小窓内のページを全く閲覧出来ないといった 問題もあります。また、検索エンジンのクローラーにも認識されません。

そこで次のようにhref属性で開くURLを指定しておき、window.open()の第一引数には this.hrefを渡し、そして、window.open()の後にreturn false;でhref属性への イベントを抑制するとJavaScriptが有効の場合は小窓、無効または実装されていない 場合は普通のハイパーリンクとなります。
※ アクセシビリティの観点から、この方法が最善だろうと思います。

テスト６ （小窓で開きます）

<a href="example.html" onclick="window.open(this.href, 'mywindow6', 'width=400, height=300, menubar=no, toolbar=no, scrollbars=yes'); return false;">テスト６</a>

小窓を画面の中央に表示するよう考えてみました。 URL、ウィンドウ名、幅、高さを指定して使用出来るようにしていますので、 これ一つあれば様々なサイズのウィンドウが開けます。

クリック１ （４００×３００の小窓で開きます）
クリック２ （６００×４００の小窓で開きます）

<script type="text/javascript"><!--
function m_win(url,windowname,width,height) {
 var features="location=no, menubar=no, status=yes, scrollbars=yes, resizable=yes, toolbar=no";
 if (width) {
  if (window.screen.width > width)
   features+=", left="+(window.screen.width-width)/2;
  else width=window.screen.width;
  features+=", width="+width;
 }
 if (height) {
  if (window.screen.height > height)
   features+=", top="+(window.screen.height-height)/2;
  else height=window.screen.height;
  features+=", height="+height;
 }
 window.open(url,windowname,features);
}
// --></script>

<a href="example.html" onclick="m_win(this.href,'mywindow7',400,300); return false;">クリック１</a><br>
<a href="example.html" onclick="m_win(this.href,null,600,400); return false;">クリック２</a><br>
※ システムのキャプションバーやその他非表示のバーの影響でしょうか？ 縦の位置はいくらか下になります。
※ Operaのような新規ウィンドウを親ウィンドウ内に表示するブラウザは 中央になりません。