連載
» 2016年04月20日 05時00分 UPDATE

.NET TIPS:ページをリダイレクト(画面遷移)するには?[JavaScript]

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

[山本康彦,BluewaterSoft/Microsoft MVP for Windows Development]
.NET TIPS
Insider.NET

 

「.NET TIPS」のインデックス

連載目次

 表示しているページを別のページにリダイレクト(画面遷移)させたいときに、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メソッドの違い 通常のリダイレクトと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ページまで戻ってしまう。

まとめ

 JavaScriptでページをリダイレクトするには、locationインタフェースのhrefプロパティかassignメソッドを使う。あるいは、locationインタフェースのreplaceメソッドを使えば、ブラウザの履歴に残さずにリダイレクトできる。

カテゴリ:JavaScript 処理対象:ナビゲーション
関連TIPS:Visual Studioで静的HTMLページのJavaScriptコードをデバッグするには?


「.NET TIPS」のインデックス

.NET TIPS

Copyright© 1999-2017 Digital Advantage Corp. All Rights Reserved.

@IT Special

- PR -

TechTargetジャパン

この記事に関連するホワイトペーパー

RSSについて

アイティメディアIDについて

メールマガジン登録

@ITのメールマガジンは、 もちろん、すべて無料です。ぜひメールマガジンをご購読ください。