JavaScriptでのページ遷移の種類

JavaScriptでの通常のページ遷移、別タブへのページ遷移、新規ウインドウへのページ遷移を試してみます。

通常のページ遷移

通常のページ遷移はlocation.hrefを使用します。

HTML

<select id="select">
	<option value="">選択してください</option>
	<option value="http://www.yahoo.co.jp/">Yahoo</option>
	<option value="https://www.google.co.jp/">Google</option>
	<option value="http://www.amazon.co.jp/">Amazon</option>
</select>

JavaScript

$(function() {
	$(document).on('change', '#select', function() {
		var url = $(this).val();
		if(url != '') {
			location.href = url;
		}
	});
});

通常のページ遷移のデモページ
　

別タブへのページ遷移

別タブへのページ遷移はwindow.open()を使用します。

JavaScript

$(function() {
	$(document).on('change', '#select', function() {
		var url = $(this).val();
		if(url != '') {
			window.open(url);
		}
	});
});

別タブへのページ遷移のデモページ
　

新規ウインドウへのページ遷移

新規ウインドウへのページ遷移は、window.open()の第三引数まで指定します。

JavaScript

var features = 'width=900,height=500';
$(function() {
	$(document).on('change', '#select', function() {
		var url = $(this).val();
		if(url != '') {
			window.open(url, 'blank', features);
		}
	});
});

新規ウインドウへのページ遷移のデモページ
　

【参考サイト】

• window.open – Web API インターフェイス | MDN
• javascriptで新規タブ/ウィンドウを作成する時の罠 – Qiita