JS

ネイティブネタ帳

UI

モーダル

タブ

ドロワー

スライダー

スクロール

アコーディオン

目次

ローディングアニメーション

ツールチップ

ヘッダー

フォーム

フォーム

文字

文字の装飾

文字の操作

文字のカウント

数字の操作

ウィンドウ

ウィンドウ操作

タイトルの操作

ページ遷移時の動き

class

classの操作

要素

要素の操作

要素の追加

API

WP REST API

Google Books APIs

楽天市場API

画像・動画

画像の操作

YouTube

リンク

Google Analytics

cookie

検索

検索

お気に入り登録

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

お気に入り登録をすると、お気に入り記事一覧に登録することができます。

window.open

JavaScriptの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のイベントハンドラで記述しても大丈夫です。