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

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

```Markdown:動作環境
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`を指定します。

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

下記のデモページでwindow.openを実行することができます。
[デモはこちら](https://yunbow.github.io/sample-javascript-api/window_open/option/)
[ソースファイルはこちら](https://github.com/yunbow/sample-javascript-api/tree/master/window_open/option/)

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

```JavaScript: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のオプションは動かない](https://ameblo.jp/softwaredeveloper/entry-12333585903.html)