Help us understand the problem. What is going on with this article?

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

More than 1 year has passed since last update.

JavaSriptのwindow.openoptionについて紹介します。(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とは、サブウィンドウを生成して、第1引数に指定されたリソースを参照する関数です。第2引数はウィンドウ名、第3引数はウィンドウの高さや幅などのoptionを指定します。

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

下記のデモページで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);
});

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

オプション: 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のオプションは動かない

Why do not you register as a user and use Qiita more conveniently?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away