jQueryでウィンドウを操作しよう!

jQueryでウィンドウを操作しよう!

ウィンドウを操作するには、JavaScriptのwindow.open(), window.close(), window.focus()を使用します。

ウィンドウサイズの変更、取得、分岐

  • ウィンドウサイズの変更
  • ウィンドウサイズでの分岐
  • ウィンドウの高さ、幅の取得

これらの項目については、以下の記事を参照してください。

新しいウィンドウを開くには?

let window_opened = null;

$('.open').on('click', function() {
    window_opened = window.open('about:blank', 'タイトル', 'resizable');
});

新しいウィンドウを開くには、window.open()を使用します。

サンプルでは、window.openの第1引数にURL、第2引数にタイトル、第3引数に’resizable’を渡し、ウィンドウを開くクリックイベントを追加しています。

ユーザーの操作に基づかないwindow.openは、ポップアップブロックに防止される場合があるので、注意しましょう。

第3引数の’resizable’を省略すると、ウィンドウではなくタブで開かれます。

window.openの戻り値は新しいウィンドウのオブジェクトです。

サンプルでは、クリックイベントの外で宣言したwindow_opened変数に代入しています。

変数をイベントの外で宣言することにより、他のイベントでもウィンドウのオブジェクトを使用できます。

ウィンドウの幅、高さを指定するには?

window.open('about:blank', 'タイトル', 'width=400,height=300');

ウィンドウの幅、高さを指定するには、window.openの第3引数に、カンマ区切りのオプション文字列を渡します。

widthが幅、heightが高さを表し、各々ピクセル単位で入力します。

ウィンドウを閉じるには?

window_opened.close();

ウィンドウを閉じるには、windowオブジェクトで.close()を使用します。

多くのブラウザでは、window.openで開いたウィンドウ以外は閉じることができません。

サンプルでは、新しく開いたウィンドウのオブジェクトを格納したwindow_openedで.close()を実行しています。

ウィンドウを閉じる直前にイベントを追加するには?

$(window).on('beforeunload', function() {
    return 'ウィンドウを閉じますか?';
});

ウィンドウを閉じる直前にイベントを追加するには、windowのjQueryオブジェクトに対し、beforeunloadイベントを使用します。

戻り値に確認メッセージを返すことで、ウィンドウを閉じるか否かの確認ウィンドウを表示できます。

Chrome等のモダンブラウザでは、メッセージは表示されず、確認ウィンドウのみが表示されます。

何らかのコードを追加できる点は、他のイベントと同様です。

Chromeでbeforeunloadが動作しない

[Intervention] Blocked attempt to show a 'beforeunload' confirmation panel for a frame that never had a user gesture since its load. 
https://www.chromestatus.com/feature/5082396709879808

Chromeでは、ページがロードされてからユーザー操作を開始されるまでは、beforeunloadイベントによる確認ウィンドウは表示されません。

Blocked alert('alert') during beforeunload.
Blocked confirm('confirm') during beforeunload.

beforeunloadイベント内のalert(), confirm()はブロックされます。

ウィンドウを最前面に表示するには?

window_opened.focus();

ウィンドウを最前面に表示するには、windowオブジェクトで.focus()を使用します。

window.close()と同様、多くのブラウザでは、window.openで開いたウィンドウのみ、最前面に表示できます。

まとめ

  • 新しいウィンドウを開くには、window.open()を使用します。
  • ウィンドウの幅、高さを指定するには、window.open()の第3引数にオプションを入力します。
  • ウィンドウを閉じるには、window.close()を使用します。
  • ウィンドウを閉じる直前にイベントを追加するには、beforeunloadイベントを使用します。
  • ウィンドウを最前面に表示するには、window.focus()を使用します。

入門カテゴリの最新記事