jQueryでページ遷移をする方法とサンプル

JavaScriptでは、ページ遷移・リダイレクトするためのメソッドとして、window.location.hrefが用意されており、jQueryでもこのメソッドを使うことでページ遷移・リダイレクトができます。 今回は、jQueryを使ったさまざまなパターンのページ遷移をサンプルを交えながら説明します。

JavaScriptでページ遷移

JavaScriptでページ遷移をするには、window.locationオブジェクトを使います。 UX MILKに遷移する場合は、以下のようになります。
window.location.href = "http://uxmilk.jp";
また、相対パスを使うこともできます。同じドメインのトップページに遷移したい場合は、以下のようになります。
window.location.href = "/";
参照:絶対パスと相対パスの違い

jQueryを使ったページ遷移のサンプル

ページ読み込みから3秒後にページ遷移

jQueryの$(window).load();と、setTimeout()を組み合わせて、ページ読み込みから3秒後にトップページに遷移する処理です。 setTimeout()は、ミリ秒(1,000分の1秒)で指定した時間が経過後に処理を実行します。
$(window).load(function() {
  setTimeout(function(){
    window.location.href = '/';
  }, 3000);
});

ボタンクリック時にページ遷移

ボタンがクリックされた時に、ページ遷移する処理です。ページ遷移前に処理を入れたい場合に使えます。 以下はボタンがクリックされると、確認ダイアログが表示され「OK」であればページ遷移するという例です。
$("#button").click(function() {
  if (confirm('ページ遷移しますか?')) {
    window.location.href = '/';
  }
});

プルダウンメニュー変更時に遷移

selectタグで作ったプルダウンメニューを選択した時に、ページ遷移するものです。 optionタグのvalue属性に遷移先のURLを指定します。
selectタグの選択肢が変更された時、もしvalue属性が空文字でなければ指定のURLに遷移します。
$('select').change(function() {
  if ($(this).val() != '') {
    window.location.href = $(this).val();
  }
});
このように、JavaScriptだけでもページ遷移は実装できますが、jQueryを使うとより手軽にカスタマイズをすることができます。