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

JavaSriptのwindow.openのoptionについて紹介します。（2018年11月現在）

動作環境

OS: Windows 10 Pro
Google Chrome: 70.0.3538.110
Mozilla Firefox: 63.0.3
Microsoft Edge: 42.17134.1.0
Microsoft Internet Explorer: 11.407.17134.0

window.openとは

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

下記のデモページでwindow.openを実行することができます。
デモはこちら
ソースファイルはこちら

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

index.js

$('#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は、常に非表示となり、この機能が動作していません。

ブラウザ名	動作可否	メニューバー
Google Chrome	×	常に非表示
Mozilla Firefox	○	yes=表示, no=非表示
Microsoft Edge	×	常に非表示
Microsoft Internet Explorer	○	yes=表示, no=非表示

オプション: toolbar

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

ブラウザ名	動作可否	ツールバー
Google Chrome	×	常に非表示
Mozilla Firefox	○	yes=表示, no=非表示
Microsoft Edge	×	常に非表示
Microsoft Internet Explorer	○	yes=表示, no=非表示

オプション: location

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

ブラウザ名	動作可否	アドレスバー
Google Chrome	×	常に表示
Mozilla Firefox	×	常に表示
Microsoft Edge	×	常に表示
Microsoft Internet Explorer	○	yes=表示, no=非表示

オプション: status

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

ブラウザ名	動作可否	ステータスバー
Google Chrome	×	常に非表示
Mozilla Firefox	×	常に非表示
Microsoft Edge	×	常に非表示
Microsoft Internet Explorer	○	yes=表示, no=非表示

オプション: resizable

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

ブラウザ名	動作可否	リサイズ
Google Chrome	×	常にリサイズ可能
Mozilla Firefox	×	常にリサイズ可能
Microsoft Edge	×	常にリサイズ可能
Microsoft Internet Explorer	○	yes=リサイズ可能, no=リサイズ不可

オプション: scrollbars

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

ブラウザ名	動作可否	スクロールバー
Google Chrome	×	常に表示
Mozilla Firefox	○	yes=表示, no=非表示
Microsoft Edge	×	常に表示
Microsoft Internet Explorer	○	yes=表示, no=非表示

まとめ

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

引用

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