JavaScriptから新しいタブで開く方法【現役エンジニアが解説】

PROGRAM

今回は、JavaScriptから新しいタブで開く方法について、フォーム送信の有無に分け、簡単に解説していきます。

新しいタブで開く方法

JavaScriptから新しいタブで開く方法は簡単です。

windowインターフェースのopen()メソッドを使うだけです。

window.open('https://www.google.com/');

上記コードのように、open()メソッドの第一引数には開きたいURLを指定します。

新しいタブでフォーム送信する方法

新しいタブでフォーム送信する場合には、別の方法となります。

フォームを作成したうえで、そのフォームのtarget属性の値を”_blank”とします。

// フォームを作成(JavaScriptで作成の場合)
var form = document.createElement("form");
var input = document.createElement("input");
input.name="input_name";
input.value="input_value";
form.appendChild(input);
form.action = "https://www.google.com/";
form.method = "POST";

// フォームを指定(HTMLで作成の場合)
// var form = document.getElementById("form");

// 新しいタブでフォーム送信
form.target = "_blank";
form.submit();

上記のコードでは、JavaScriptからフォームを作成し、新しいタブでフォーム送信しています。

JavaScriptから開いたタブを閉じる方法

JavaScriptから開いたタブはJavaScriptで閉じることもできます。

そのためには、windowインターフェースのopen()メソッドの返り値に対し、close()メソッドを使います。

window.open('', '_self').close();

上記のコードのように、open()メソッドの第二引数を”_self”とすることで、自分自身のウィンドウ(タブ)を指定することができます。