JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

JavaScriptでHTMLページをリダイレクトする方法をわかりやすく解説

ページリダイレクトとは？

あるURLをクリックしてページXにアクセスしたはずなのに、実際には別のページYに移動された——そんな経験はありませんか？これは「ページリダイレクト」と呼ばれる仕組みによるものです。Web開発では、サイト移転時や古いURLから新しいURLへの誘導など、さまざまな場面で活用されています。

JavaScriptでリダイレクトを実装する

JavaScriptを使えば、クライアント側（ブラウザ側）で非常にシンプルにページリダイレクトを実現できます。特別なライブラリやサーバー側の設定は不要で、window.location.assign()メソッドを呼び出すだけでOKです。

訪問者を新しいページへ誘導したい場合は、次のようにセクション内にリダイレクト処理を定義し、ボタンのクリックイベントなどで呼び出します。

サンプルコード：ボタンクリックでホームページへ移動する

以下のコードを実行すると、JavaScriptによるページリダイレクトの動作を実際に確認できます。この例では、ボタンをクリックするとホームページへ遷移します。

<html>
   <head>
      <script>
         <!--
            function Redirect() {
               window.location.assign("https://www.tutorialspoint.com");
            }
         //-->
      </script>
   </head>
   <body>
      <p>次のボタンをクリックすると、ホームページへリダイレクトされます。</p>
      <input type="button" value="リダイレクト" onclick="Redirect();" />
   </body>
</html>

補足：location.hrefとの違い

リダイレクトには、window.location.href = "URL"; を代入する方法も広く使われています。assign()メソッドとの大きな違いは、hrefへの代入では元のページがブラウザの履歴に残るため、「戻る」ボタンで前のページに戻れる点です。履歴に残さずリダイレクトしたい場合は、window.location.replace("URL")を使用するとよいでしょう。

  1. HTMLページでアニメーション画像（GIF）を表示する方法をわかりやすく解説

    HTMLにおけるアニメーション画像とは、Webページ上で動きのある画像のことです。一般的にはGIF（Graphics Interchange Format／グラフィックス・インターチェンジ・フォーマット）形式のファイルが使用されます。GIFは特別なプラグインやJavaScriptなしでもブラウザ上で自動的に再生されるため、手軽に動きのあるコンテンツを表現できるのが魅力です。 HTMLでアニメーション画像を追加するのはとても簡単です。<img>タグにsrc属性を組み合わせて使用します。src属性には、表示したいGIF画像のURLを指定します。 さらに、height属性とwidth属

  2. HTMLページからリダイレクトする方法を解説！metaタグの使い方

    ページリダイレクトとは？ ページリダイレクトとは、あるURLをクリックしてページXにアクセスしたにもかかわらず、内部的に別のページYへ自動的に転送される仕組みのことです。サイトの移転やURLの変更、メンテナンス中の一時的な誘導など、さまざまな場面で活用されています。 HTMLページでリダイレクトする基本：METAタグを使う HTMLページから別のページへリダイレクトさせるには、<meta>タグを使用します。<head>内に記述したmetaタグのhttp-equiv属性でHTTPヘッダーに相当する値を指定し、content属性で転送までの待機秒数と転送先URLを設定しま