HTML秒数指定で別ページへリダイレクトさせる方法

公開日：2022/01/18

問合せフォーム等の送信完了後に「○秒後にトップページにリダイレクトされます」といった表記があり、指定秒数後に自動的にページが切り替えされるような仕組みを見たことはないでしょうか。

またはサイト移転されていた時など旧ページにアクセスした際に新サイトへの案内とともに「本サイトは移転しました。5秒後にジャンプします」といった感じで自動的にページ移動させるような仕組みにも使われたりしています。

そのような自動的に他のページに移動させる簡単な方法としてMETAタグを使う方法とJavascriptを使う方法があります。本日は知っていれば役に立つかもしれないHTMLで自動的に他のページに移動させる方法について紹介したいと思います。

HTMLで別ページにリダイレクトさせる方法

metaタグで転送方法

<meta http-equiv="refresh" content="秒数; url=転送先のURL">

上記の記述をHTMLの＜head＞＜/head＞内に記述するだけで転送設定が可能です。

転送先URLの記述としては相対パスでも、https:から記述する直接指定でもかまいません。指定した秒数についてですが、ページが表示されてから指定した秒数後に転送先URLにリダイレクトしてページ表示が切り替わります。

記述例

<head>
<meta http-equiv="refresh" content="5;url=https://shopping.yahoo.co.jp/">
</head>

5秒後にYahooショッピングのトップページに移動します。

<head>
<meta http-equiv="refresh" content="15; url=https://www.rakuten.co.jp/">
</head>

15秒後に楽天市場のトップページに移動します。

<head>
<meta http-equiv="refresh" content="0; url=転送先URL">
</head>

ちなみにですが秒数に0秒を指定した場合は、即座に指定したURLにリダイレクトされます。

javascriptでの転送方法/settimeoutとlocation.href

さきほどはhtmlのmetaタグの記述で自動的に他のページにジャンプさせる方法を紹介しました。非常に簡単な記述で数秒後に別ページを表示を実装することができました。同様のことはjavascriptで実装することも可能です。

javascriptのタイマー処理を使って実装してみましょう。setTimeoutという命令で一定時間後に一度だけ特定の処理をおこなうことができます。

書き方について
setTimeout(実行したい処理, 一定時間の指定)

次に、location.hrefを使用することで画面遷移ができます。以下のようなコードで遷移できます。

location.href = ‘https://www.〇〇 ‘;

この2つの命令を組み合わせることで別ページに移動させる仕組みを実装することができます。

setTimeout("location.href='転送先URL'",3000)；

3000と記述している部分=3秒となります。

javascriptでの記述例

<html>
<head>
</head>
<body onLoad=setTimeout("location.href='https://www.rakuten.co.jp/'",5000)>
約5秒後に楽天市場のトップページにジャンプします。
</body>
</html>

ページのロード時にタイマー処理、転送処理を呼び出しように記述しています。別ページに転送されるという意味ではmetaタグと同じ動作になります。

この記述例はページロードした時に呼び出すようにしていますがjavascriptの場合は、ボタンをクリックした時といった色々なアクションに対して呼び出し指定が可能なので色々な場面で使えるというメリットがあるかもしれません。

シンプルで簡単なのはmetaタグを使った記述をですね。