ポップアップとウィンドウメソッド

ポップアップウィンドウは、利用者に追加のコンテンツを見せるための最も古い方法の1つです。

基本的には次のように実行するだけです:

window.open('http://javascript.info/')

… すると、指定された URL で新しいウィンドウが開きます。ほとんどのモダンブラウザは、別ウィンドウではなく新しいタブとして開くよう設定されています。

ポップアップはとても古くから存在します。当初の考えは、メインのウィンドウを閉じることなく別のコンテンツを表示することでした。現時点では、それをするための他の方法があります: fetch を使うことでコンテンツを動的に読み込むことができ、それを動的に生成された <div> の中で表示することができます。ですから、ポップアップは私達が普段使用するものではありません。

さらにポップアップは、複数のウィンドウを同時には表示しないモバイルデバイスでは手際を要します。

それでも、ポップアップがいまだに使われるタスクが存在します。例えば OAuth 認証（Google や Facebook などへのログイン）。なぜなら:

ポップアップは独立した JavaScript 環境を持つウィンドウです。ですから、第三者の信頼されていないサイトから開くポップアップは安全です。
ポップアップを開くことは非常に簡単です。
ポップアップはナビゲート（URLの変更）可能で、ポップアップを開いたウィンドウにメッセージを送ることができます。

ポップアップブロック

過去、悪意のあるサイトはポップアップを大いに乱用しました。悪意のあるページは広告を含むウィンドウを何度も開く事ができました。そのため、現在多くのブラウザはポップアップをブロックし、ユーザを守ろうとしています。

ほとんどのブラウザは、onclick などユーザがトリガーしたイベントハンドラ外から呼ばれた場合には、ポップアップをブロックします。

これについて考える場合、少し注意が必要です。もしコードが直接 onclick 内にあればそれは簡単です。しかし、ポップアップは setTimeout で開くでしょうか？

例えば:

          // ポップアップはブロックされます
window.open('https://javascript.info');

// ポップアップは許可されます
button.onclick = () => {
  window.open('https://javascript.info');
};
        

このように、ユーザは望まないポップアップからある程度は守られていますが、その機能は完全には無効にされていません。

window.open

ポップアップを開く構文は次の通りです: window.open(url, name, params):

url: 新しいウィンドウでロードする URL
name: 新しいウィンドウの名前。各ウィンドウは window.name を持っており、ここでポップアップに使うウィンドウを指定することができます。すでに同じ名前のウィンドウがあった場合、そこで指定された URL が開きます。なければ新しいウィンドウが開きます。
params: 新しいウィンドウの設定文字列。カンマで区切られた設定を含みます。params の中にスペースを入れてはいけません。例: width:200,height=100.

params の設定:

ポジション:
- left/top (数値) – 画面上のウィンドウの左上隅の座標。新しいウィンドウを画面外に配置することはできない、という制限があります。
- width/height (数値) – 新しいウィンドウの width と height 。最小の width/height の制限があるので、, 見えないウィンドウを作成することはできません。
ウィンドウの機能:
- menubar (yes/no) – 新しいウィンドウで、ブラウザのメニューを表示します/非表示にします。
- toolbar (yes/no) – 新しいウィンドウで、ブラウザナビゲーション(戻る/進む/更新など)を表示します/非表示にします。
- location (yes/no) – 新しいウィンドウで、URL フィールドを表示します/非表示にします。FF と IE はデフォルトでは隠すことは許可されていません。
- status (yes/no) – ステータスバーを表示します/非表示にします。ほとんどのブラウザは強制的に表示させます。
- resizable (yes/no) – 新しいウィンドウのリサイズを無効にします。非推奨です。
- scrollbars (yes/no) – 新しいウィンドウのスクロールバーを無効にします。非推奨です。

あまりサポートされていないブラウザ固有の機能も数多くありますが、通常は使用されていません。例については、MDN の window.open を確認してみてください。

例: 最小限のウィンドウ

ブラウザがどの機能の無効化を許容するか、最小セットの機能でウィンドウを開いてみましょう。:

let params = `scrollbars=no,resizable=no,status=no,location=no,toolbar=no,menubar=no,
width=0,height=0,left=-1000,top=-1000`;

open('/', 'test', params);

ここでは、ほとんどの "ウィンドウの機能は無効にされ、ウィンドウは画面外に配置されています。実行して実際に何が起きるのかを見てください。ほとんどのブラウザはゼロ値の width/height や画面外の left/top といったおかしなものを “直します”。例えば、Chrome はフルスクリーンになるよう、画面幅/高さでウィンドウを開きます。

通常の配置オプションと妥当な width, height, left, top 座標を追加しましょう。: