Javascript

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

【オリジナルの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)
*Edge、Chrome、Safariでは対応していません。

関連リンク

オリジナルのSNSシェアボタンを設置する方法
MDN – window.open

プログラミング言語の人気オンラインコース