window.open()のオプションについて解説。

HOME
更新日:2015.05.03
HOMEJavaScript入門 > window.open()のオプション

window.open()のオプション

前のページでは、別ウィンドウのサイズと位置を指定する方法について見ました。 このページでは、サブウィンドウのスクロールバーメニューバー等のON/OFFの設定について解説します(しかしブラウザやそのバージョンによって挙動は様々であり、うまく動かないことも多々あります。 その点はしっかり銘記しておきましょう)。

オプション変更関数の作成

まずは以下の関数をヘッダーに記入して下さい。

<script>

function subWin(option){
  window.open("test.html","sub","width=640,height=480,top=0,left=0"
              +","+option);
}

関数subWin()の引数にoptionを指定しています。 そして関数の中でwindow.open()を呼び出して、 サブウィンドウに表示するページを「test.html」、 ウィンドウ名を「sub」、 サイズは640×480ピクセル、位置は左上にしています。 (test.htmlの部分は自由に変更して下さい)。

またオプション部分はクォーテーションで括っていることから文字列とみなされることが分かります。 と言うことで、上記のように「 + 」を使って繋げることが可能です。 今回は引数optionにいろいろなオプション属性を指定して調べてみたいと思います。

スクロールバー他のON/OFF

ではBODY内に以下のタグを記入してください。

<form>
<input type="button" value="スクロールON"
                     onclick="subWin('scrollbars=yes')">
<input type="button" value="スクロールOFF"
                     onclick="subWin('scrollbars=no')"><br>
</form>
 サンプル

上記のように、scrollbarsがスクロールバーに関するオプションパラメーターです。 yesなら表示、noなら非表示になります。 他のオプションパラメーターと共に、以下に載せておきます。

scrollbars=yes/no
スクロールバーの表示、非表示を指定します。
toolbar=yes/no
ツールバーの表示、非表示を指定します。
menubar=yes/no
メニューバーの表示・非表示を指定します。
status=yes/no
ステータスバーの表示・非表示を指定します。
directories=yes/no
ディレクトリバーの表示・非表示を指定します。
resizable=yes/no
ウィンドウサイズ変更の許可・不可を指定します。

さて、サブウィンドウを表示させてみて分かると思いますが、指定通りにならないものもあります。 実はこのオプション指定、ブラウザによって挙動はまちまちなのです。 このことを頭の片隅に必ず置いておいて下さい。でないと思わぬ失敗をするかも知れません。

2013.02.08追記
残念ながら、最近のブラウザでは殆どの場合、指定は無視されるようです。

オプションパラメーターを複数記入する時

最後に、これらのパラメーターは複数指定も可能だと言うことを付け加えておきます。 下記のように記入することができます。

window.open("test.html","sub","width=640,height=480,top=0,left=0"+
            ",scrollbars=no,toolbar=no,menubar=no,status=no"+
            ",directories=no,resizable=no");

オプションパラメーターを沢山記入する場合はとても長くなるので、 上の例では3行に分けて書いています。 この時、行を変える場合は必ずクォーテーション一度閉じて、 「 + 」を用いて繋げるようにしましょう。 クォーテーション内で改行すると即エラーになります(下記の例ではエラーになります)。

window.open("test.html","sub","width=640,height=480,top=0,left=0
            ,scrollbars=no,toolbar=no,menubar=no,status=no
            ,directories=no,resizable=no");

次のページでは、サブウィンドウを画面中央に表示する方法を考えてみましょう。