JavaScriptで特定のページを新しいウィンドウで開かせたい時に便利なwindow.open()メソッドの使い方

新規ウィンドウでページを開かせるwindow.open()メソッド

JavaScriptで特定のページを新しいウィンドウで開かせたい時はwindow.open()メソッドが便利です。

メソッド

メソッド意味返り値
window.open(URL)別窓で指定されたURLを開く新しく開かれたページのオブジェクト
window.open(URL)メソッド

サンプルコード

サンプルコードとして、「更新」ボタンを押すと、指定されたページを別窓で開きます。

Output
Pug
input(type="url").textarea#targetText.w-100.form-control
	button#button.mb-4.text-center 更新
SCSS
#button {
	--background-color: #fff;
	--color: #576574;
	--transition: all 0.3s;
	margin-bottom: 10px;
	background-color: var(--background-color);
	padding: 10px;
	color: var(--color);
	border: 1px solid #576574;
	cursor: pointer;
	width: 120px;
	transition: var(--transition);
	&:hover {
		transition: var(--transition);
		color: var(--background-color);
		background-color: var(--color);
	}
}
JavaScript
const targetText = document.getElementById( 'targetText' );
document.getElementById('button').addEventListener('click', onClickAction);


/** ボタンをクリックと関数を実行 */
function onClickAction() {
	//コンファームを表示
	const checkConfirm = confirm('指定されたURLを別窓で開きます。よろしいですか?'); 
	if ( checkConfirm ) {
		window.open(targetText.value).focus();
	}
}

ちなみに、サンプルコードの様にfocus();を付与すると、別窓で開いた時にウィンドウが必ずアクティブになり、画面に表示される様になります。

インストラクター
コメント

コメントを残す