ページをリダイレクト（画面遷移）するには？［JavaScript］：.NET TIPS

JavaScriptを使って画面遷移を行うには、locationインタフェースのhrefプロパティ／assignメソッド／replaceメソッドが使える。

» 2016年04月20日 05時00分公開

[山本康彦，BluewaterSoft／Microsoft MVP for Windows Development]

　表示しているページを別のページにリダイレクト（画面遷移）させたいときに、HTMLのリンク（<a>要素）ではなく、JavaScriptで実行したいことがあるだろう。また、ページをリダイレクトするときに、リダイレクト前に表示していたページをブラウザの履歴に残したくないと思ったこともあるのではないだろうか？

　本稿では、JavaScriptを使ってページを指定したURLへリダイレクトする方法を、整理して紹介する。

JavaScriptでリダイレクトする4通りの方法

　最初に、JavaScriptでリダイレクトする方法の一覧を載せておこう（次の表）。指定したURLへリダイレクトする方法だけでも、4通りある（windowオブジェクトのhistoryインタフェースを使ってリダイレクトする方法は、本稿では扱わない）。


JavaScript	備考
window.location.href = "{url}";	HTMLのリンクのクリックと同様
window.location.assign("{url}");	HTMLのリンクのクリックと同様
window.navigate("{url}");	リファラを送信しない（IE専用）
window.location.replace("{url}");	ブラウザの履歴に残さない

JavaScriptで指定したURLへリダイレクトする4通りの方法
「{url}」は、リダイレクト先を表すURL文字列である（相対指定または絶対指定）。
「window.location」は「document.location」でもよいし、省略して「location」だけでもよい。

HTMLのリンクと同じようにリダイレクトするには？

　locationインタフェースのhrefプロパティかassignメソッドを使う（次のコード）。locationインタフェースは、windowオブジェクトとdocumentインタフェースが持っている。

　hrefプロパティもassignメソッドも、文字列で指定されたURLへページをリダイレクトする。HTMLのリンクと同様に、現在のページ（＝リダイレクト前のページ）をブラウザの履歴に残し、HTTPリファラも送信する。

　hrefプロパティとassignメソッドは、どちらを使っても良い。筆者は、（少しだけ）短く書けるhrefプロパティが好みだ。

　なお、Internet Explorer（IE）には、他にも似たような機能としてwindowオブジェクトにnavigateメソッドがある。これは、HTTPリファラを送信しない。

// hrefプロパティを使う
window.location.href = 'page2.html';
// または、
// assignメソッドを使う
document.location.assign('page2.html');
// 「location」の手前に書くのは、「window」でも「document」でもよい
// あるいは、省略しても構わない

// IEでは、navigateメソッドも使える。ただし、リファラを送信しない
window.navigate('page2.html');

HTMLのリンクと同じようにリダイレクトするコードの例（JavaScript）
「page2.html」ページにリダイレクトする例である。

現在のページを履歴に残さずにリダイレクトするには？

　locationインタフェースのreplaceメソッドを使う（次のコード）。

// replaceメソッドを使う
window.location.replace('page3.html');
// 「location」の手前に書くのは、「window」でも「document」でもよい
// あるいは、省略しても構わない

履歴を残さずにリダイレクトするコードの例（JavaScript）
「page3.html」ページにリダイレクトする例である。

　replaceメソッドでリダイレクトすると、表示していたページ（＝リダイレクト前のページ）はブラウザの履歴に残らない。すなわち、リダイレクト先のページでブラウザの［戻る］ボタンを使うと、直前のページを飛ばして、その前のページまで戻るのである（次の図）。

通常のリダイレクトとreplaceメソッドの違い
page1.htmlページからpage2.htmlページへは、location.hrefプロパティなどを使って普通にリダイレクトしている。page2.htmlページでブラウザの［戻る］ボタンを使うと、直前のpage1.htmlページへ戻る。
page2.htmlページからpage3.htmlページへは、location.replaceメソッドでリダイレクトした。この場合、ブラウザの履歴にpage2.htmlページが残っていない。そのため、page3.htmlページで［戻る］ボタンを使うと、直前のpage2.htmlではなく、もう1つ前のpage1.htmlページまで戻ってしまう。