JavaScriptから新しいタブで開く方法【現役エンジニアが解説】
今回は、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”とすることで、自分自身のウィンドウ(タブ)を指定することができます。