All Articles

今更だけどJavascriptのwindowオブジェクトを使いこなす

Window.openのDEMO

Window.open()

Window.openは、新しくウィンドウ、タブ,iframeを開くことができます。

var window = window.open(url, windowName, [windowFeatures]);

引数は下記の通りです。

  • url: 開いた先でロードするURLを指定します。
  • windowName: ウィンドウ、タブに名前をつけます。別の名前を使用すると、新しく別のウィンドウ・タブが開きます。
  • windowFeatures: オプションを指定して新しくウィンドウ・タブを開きます。

Window.open() windowFeatures

オプションの指定方法は、 "name=value"をカンマで区切りで並べた形式のテキストで指定します。 指定できるオプションは下記の通りです。

Window.open() windowFeatures#left

オペレーティングシステムの作業領域の左端から距離を数値で指定します。デュアルディスプレイの場合は注意が必要。

Window.open() windowFeatures#top

オペレーティングシステムの作業領域の上端から距離を数値で指定します。デュアルディスプレイの場合は注意が必要。

Window.open() windowFeatures#width

新しいウィンドウの表示領域の幅をピクセル単位で指定します。

Window.open() windowFeatures#height

新しいウィンドウの表示領域の高さをピクセル単位で指定します。

Window.open() windowFeatures#menubar

メニューバーの表示・非表示を設定します。 設定値はmenubar=yes, menubar=1のように設定します。

Window.open() windowFeatures#toolbar

ツールバーの表示・非表示を設定します。 設定値はtoolbar=yes, toolbar=1のように設定します。

Window.open() windowFeatures#location

ロケーションバーの表示・非表示を設定します。 設定値はlocation=yes, location=1のように設定します。

Window.open() windowFeatures#status

ステータスバーの表示・非表示を設定します。 設定値はstatus=yes, status=1のように設定します。

Window.open() windowFeatures#scrollbars

スクロールバーの表示・非表示を設定します。 設定値はscrollbars=yes, scrollbars=1のように設定します。

Window.open() windowFeatures#resizable

新しいウィンドウがリサイズ可能かを設定します。 設定値はresizable=yes, resizable=1のように設定します。

Window.open() windowFeatures#noopener

親ウィンドウ(Window.open()を使ったウィンドウ)と子ウィンドウ(Window.open()で開いたウィンドウ)の間で相互の関係性を断つためのオプションです。 Window.openerがnullになり、子ウィンドウから親ウィンドウへのアクセスができなくなります。 Window.open()の戻り値がnullになり、親ウィンドウから子ウィンドウへのアクセスができなくなります。

Window.open() windowFeatures#noreferrer

URLで指定したサーバーへリファラ情報を送信ないように設定します。 このオプションを使うと自動的にwindowFeatures#noopenerも有効になります。