window.open

JavaScriptのwindow.openでウィンドウのサイズを指定して表示

少し古い挙動で、そこまで使用頻度の高いものではありませんが、JavaScriptのwindow.open のウィンドウ表示をするスニペットを作りました。

window.open

JavaScriptの .open() は、新しいタブやウィンドウを開くことができるメソッドで、window.open は読んで字の如くウィンドウを新しく開きます。

記述方法は以下の通りです。

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

ですが、新しいウィンドウを開くだけなら、HTMLで <a href="" target="_blank"></a> を使用すると思いますが、ウィンドウサイズ等を変更することが出来ないので、JavaScriptのこのメソッドを使用します。

かかかず
かかかず

windowFeatures で使えるプロパティは色々ありますが、この記事ではサイズプロパティのみ使っています。

window.openの詳しい解説記事

window.open のメソッドは、MDNさんの記事に詳細がありますので、さらに詳しく知りたい方は以下の記事を参考にしてみてください。

かかかず
かかかず

いつもお世話になるMDNさんの記事です。わかりやすい内容です。

window.openでウィンドウ表示のサンプル

早速 window.open を使ったサンプルです。

ボタンクリックで別サイトのページをwidth600、height600ピクセルの正方形で開きます。

かかかず
かかかず

通常のaタグのリンクだと、ウィンドウサイズを変更することは出来ないので、そんな時に使用するスニペットです。

ウィンドウ表示サンプルのコード

.addEventListener のクリックを使用しているので、HTMLは非常にシンプルで、単に button タグのみです。

<button type="button" id="openWindowBtn">別タブで開くボタン</button>

JavaScriptのコードも簡単な構造で、.addEventListener の記述を除くと、window.open の記述のみです。

document.querySelector('#openWindowBtn').addEventListener('click', () => {
  window.open( "https://dubdesign.net/domain/price/1469/", "", "width=600,height=600" );
});

開くページのURLは、通常のリンクで使用するa タグで href に指定するURLと同様に、移動先のURLを指定して、その後にwidth・heightのサイズを指定すればOKです。

かかかず
かかかず

関数を定義するなどして、onclickのイベントハンドラで記述しても大丈夫です。