【Javascript】window.open()で新規ウィンドウを開く

2020-04-07

【オリジナルのSNSシェアボタンを設置する方法】の記事で Twitter、Facebookのボタンを押した時に、小さめの新規ウィンドウで開くようにしていました。

今回はwindow.open()を使用した新規ウィンドウのカスタマイズをするためのメモです。

【オリジナルのSNSシェアボタンを設置する方法】

SNSシェアボタンを押した時のウィンドウ表示デモ

サンプルコード

下記の記述例ではclass=“hoge”を押した時に、指定したURLを、横600px/縦450pxの新規ウィンドウを表示します。

//記述方法
window.open(URL, ウィンドウ名, オプション);
//記述例
$(".hoge").on("click", function () {
var url = "https://hibi-update.org/";
var window_name = "";
var window_opt =
"width=600, height=450, menubar=no, toolbar=no, scrollbars=yes";
window.open(url, window_name, window_opt);
});

第1引数 URL

そのままです。URL開きたいURLを指定しましょう。

第2引数 ウィンドウ名

新しいウィンドウのtitleを指定するものではありません。 新しいウィンドウでaタグ要素やform要素のターゲット属性として参照できるようにするためのウィンドウ名です。 また_blank、_selfどのターゲット属性を指定することもできます。

第3引数 オプション

オプション説明指定値
widthウィンドウの幅数値(px)
heightウィンドウの高さ数値(px)
topウィンドウ位置数値(px)
leftウィンドウ位置数値(px)
menubarメニューバーの有無yes(または1) or no(または0)
toolbarツールバーの有無yes(または1) or no(または0)
scrollbarsスクロールバーの有無yes(または1) or no(または0)
locationアドレスバーの有無yes(または1) or no(または0)
resizableウィンドウのリサイズ可否yes(または1) or no(または0)

関連リンク