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

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

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

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

hibi-update.org

Redirecting to: https://hibi-update.org/blog/sns-share/

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

hibi-update.org

デモ | オリジナルの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引数 オプション

関連リンク

hibi-update.org

Redirecting to: https://hibi-update.org/blog/sns-share/

developer.mozilla.org

Window: open() メソッド - Web API | MDN

open() は Window インターフェイスのメソッドで、指定されたリソースを、新しい、または既存の指定された名前を持った閲覧コンテキスト (ウィンドウ、 iframe、タブ) に読み込みます。