[Javascript] 最新ブラウザではwindow.openのオプションは動かない

こんにちは！パーク社員のゆんぼうです。

Webアプリ開発のクロスブラウザ対応したときに注意したいことを紹介します。

今回は、Javascriptの「window.open」関数の第3引数のオプションについてです。

動作確認した環境

OS: Windows 10 Pro

window.openとは

window.openとは、サブウィンドウを生成して、第１引数に指定されたリソースを参照する関数です。第２引数はウィンドウ名、第３引数はウィンドウの高さや幅などのオプションを指定します。

https://developer.mozilla.org/ja/docs/Web/API/window.open

下記のデモページでwindow.openを実行することができます。

【デモはこちら】

【ソースファイルはこちら】

テキストボックスとプルダウンを選択して、「window.open」ボタンを実行すると、サブウィンドウが生成されます。ソースコードは以下の通りです。

$('#openWindButton').on('click', function () {    var option =        'top=' + $('#topInput').val() +        ',left=' + $('#leftInput').val() +        ',width=' + $('#widthInput').val() +        ',height=' + $('#heightInput').val() +        ',menubar=' + $('#menubarSelect').val() +        ',toolbar=' + $('#toolbarSelect').val() +        ',location=' + $('#locationSelect').val() +        ',status=' + $('#statusSelect').val() +        ',resizable=' + $('#resizableSelect').val() +        ',scrollbars=' + $('#scrollbarsSelect').val();    log('window.open option: ' + option);    window.open('sub_window.html', 'windowName1', option);});

第３引数のオプションは、ブラウザ毎に挙動が異なりますので注意が必要です。オプションについて、ブラウザ毎の動作結果を以下に記載します。

オプション: menubar

menubarは、「yes」を指定するとサブウィンドウにメニューバーが表示されます。(Altキーを押下するとメニューが表示されます。)「no」で非表示となります。ChromeとEdgeは、常に非表示となり、この機能が動作していません。

オプション: toolbar

toolbarは、「yes」を指定するとサブウィンドウにツールバーが表示されます。「no」で非表示となります。ChromeとEdgeは、常に非表示となり、この機能が動作していません。

オプション: location

locationは、「yes」を指定するとサブウィンドウにアドレスバーが表示されます。「no」で非表示となります。ChromeとFirefox、Edgeは、常に表示となり、この機能が動作していません。IEは、インターネットオプションの「Webサイトがアドレスバーやステータスバーのないウィンドウを開くのを許可する」の設定を有効にすると、非表示にすることができます。

オプション: status

statusは、「yes」を指定するとサブウィンドウにステータスバーが表示されます。「no」で非表示となります。ChromeとFirefox、Edgeは、常に非表示となり、この機能が動作していません。

オプション: resizable

resizableは、「yes」を指定するとサブウィンドウのサイズが変更できます。「no」で変更できません。ChromeとFirefox、Edgeは、常にサイズの変更が可能で、この機能が動作していません。

オプション: scrollbars

scrollbarsは、「yes」を指定するとスクロールバーが表示されます。「no」で表示されません。ChromeとEdgeは、常に表示され、この機能が動作していません。

まとめ。インターネットでwindow.openのことを調べてみると、10年以上前の記事が散見されます。10年前と今では、同じブラウザでも挙動が異なることがあります。実際の動作を確認せずに、古い記事を鵜呑みにしないようにしてほしいと思いました。

以上です。