少し古い挙動で、そこまで使用頻度の高いものではありませんが、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のイベントハンドラで記述しても大丈夫です。
