jQueryでページ遷移を行う方法をサンプルコード付き解説!

jQueryでページ遷移を行う方法をサンプルコード付きで解説いたします。要素をクリックしたときや、プルダウンメニューを選択したとき、POSTでページ遷移させる方法など様々なパターンのページ遷移の方法を紹介します。

コンテンツ [表示]

  1. 1jQueryでページ遷移を行いたい
  2. 2jQueryでページ遷移を行う方法
  3. 2.1要素をクリックしたときにページ遷移させる
  4. 2.23秒後にページ遷移
  5. 2.3プルダウンメニュー選択時にページ遷移
  6. 2.4POSTでページ遷移
  7. 2.5【非推奨】meta refreshを使ったページ遷移
  8. 3まとめ

jQueryでページ遷移を行いたい

通常WEBページの遷移はa要素のリンクをクリックしたり、フォームの中のボタンを押すことで遷移しますが、JavaScriptやjQueryでもページ遷移を制御することが出来ます。

更にJavaScriptやjQueryの場合だとクリック以外でも任意のイベントの時にページ遷移させる事ができ、ページ遷移の幅が広がります。

今回はjQueryでページ遷移させる方法についてサンプルコード付きで解説します。

Photo bylmonk72

jQueryでページ遷移を行う方法

それではjQueryを使ってページ遷移を行う方法を様々なケース毎にサンプルコード付きで解説していきます。

要素をクリックしたときにページ遷移させる

上記のサンプルコードでは.targetのクラスが付与されている要素をクリックしたときに、jQueryでクリックイベントを拾って、指定されたURLにページ遷移させているサンプルコードです。

ページ遷移させるには下記の形でJavaScriptを記述しましょう。

ページ遷移させるコード

window.location.href = '任意のURL';

3秒後にページ遷移

上記のサンプルコードではsetTimeoutで3,000ミリ秒後(3秒後)にページ遷移させている例となります。

3秒を他の秒数に変更したい場合は、「3000」の値を他の数値に変更しましょう。

プルダウンメニュー選択時にページ遷移

上記のサンプルコードではselect要素のchangeイベントに対して、関数を設定し、その関数で選択された選択肢の値を$(this).val()で取得し、その値のサイトにページ遷移させています。

POSTでページ遷移

上記のサンプルコードではボタンをクリックした際にjQueryでPOST遷移させています。

jQueryでPOST遷移させるには少しコツが必要です。まずPOST遷移させるにはform要素がHTML中にある必要があるため、jQueryでform要素(method属性はもちろんPOST)をappendしています。

あわせて読みたい
append()
jQueryのappend()はjQueryオブジェクトで指定しているコンテンツに対して、引数で指定しているコンテンツを子要素の最後に追加するメソッドです。append()の使い方をサンプルコード付きで解説します。

そして、適当なパラメータをinput type="hidden"でフォームに設定し、最後にフォームをsubmitさせています。

【非推奨】meta refreshを使ったページ遷移

最後にmeta refreshを使ったページ遷移方法です。この方法はリダイレクトとしての扱いの問題でSEO上好ましくありませんが、念の為紹介しておきます。

headタグにmeta refreshの設定をappendで追加しています。meta refreshを使ったリダイレクトについて詳しく知りたい方は下記を参考にしましょう。

あわせて読みたい
meta refreshのリダイレクトの使い方を解説!のイメージ
meta refreshのリダイレクトの使い方を解説!
meta refreshはHTMLでリダイレクトをする方法で、head要素の中にタグを1行追加するだけでリダイレクトが出来ます。meta refreshによるリダイレクトのやり方と効かない場合の対処法をサンプルコード付きで解説します。

まとめ

いかがでしたでしょうか。jQueryを使ってページ遷移を行う方法で様々なパターンでのやり方を解説してきました。

最後にページ遷移の際にパラメータを渡したいという場合もあるかと思います。そのやり方については下記で紹介していますので、ページ遷移でパラメータも渡したいという方は下記を参考にしてみて下さい。

あわせて読みたい
jQueryでページ遷移時にパラメータの受け渡しを行う方法!のイメージ
jQueryでページ遷移時にパラメータの受け渡しを行う方法!
jQueryでページ遷移時にパラメータの受け渡しを行う方法をサンプルコード付きで解説します。GET通信・POST通信それぞれでjQueryでパラメータを受け渡してページ遷移させる方法を紹介します。
GeekHive採用サイト

関連記事