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

JavaScriptのwindow.locationを使って別のURLへリダイレクトする方法

Webサイトを閲覧している際、あるURLをクリックしてページXにアクセスしたのに、実際には別のページYへ転送された経験はありませんか？これは「ページリダイレクト」と呼ばれる仕組みによって起こる現象です。

JavaScriptを使えば、クライアントサイドでページリダイレクトを実装するのは非常に簡単です。サイト訪問者を新しいページへ誘導したい場合は、<head>セクションに数行のコードを追加するだけで実現できます。

window.locationによるリダイレクトの基本

window.locationオブジェクトには、リダイレクトに使える代表的な方法がいくつかあります。

  • window.location.assign(url)：指定したURLへ遷移します。ブラウザの履歴に残るため、「戻る」ボタンで元のページに戻れます。
  • window.location.replace(url)：指定したURLへ遷移しますが、履歴は上書きされるため「戻る」ボタンで前のページに戻れません。
  • window.location.href = url：assign()とほぼ同じ動作をする、プロパティへの代入による方法です。

サンプルコード

次のコードを実行すると、window.locationを使って別のURLへリダイレクトする流れを確認できます。この例では、ボタンをクリックするとホームページへ遷移します。

<html>
   <head>
      <script>
         <!--
            function Redirect() {
               window.location.assign("https://www.tutorialspoint.com");
            }
         //-->
      </script>
   </head>
   <body>
      <p>Click the following button, you will be redirected to home page.</p>
      <input type = "button" value="Redirect Me" onclick="Redirect();" />
   </body>
</html>

リダイレクト実装時の注意点

JavaScriptによるリダイレクトは手軽ですが、いくつか留意すべき点があります。まず、ユーザーがブラウザでJavaScriptを無効にしている場合、リダイレクトは機能しません。また、SEOの観点では、恒久的なページ移転にはサーバーサイドの301リダイレクトが推奨されます。用途に応じて、<meta http-equiv="refresh">タグやサーバー側の設定との使い分けも検討しましょう。

  1. JavaScriptでフルスクリーン（全画面）表示を実装する方法をわかりやすく解説

    Webページ上の動画や画像などの要素を、ボタン操作ひとつで全画面表示に切り替えられたら便利ですよね。JavaScriptでは、Fullscreen APIを使うことで、このようなフルスクリーン機能を簡単に実装できます。 本記事では、動画を全画面モードで再生するサンプルコードをもとに、実装方法をわかりやすく解説します。 サンプルコード 以下は、ボタンをクリックすると動画がフルスクリーンで表示されるHTMLとJavaScriptのコード例です。 <!DOCTYPE html> <html> <head> <meta name=viewport conten

  2. JavaScriptで別のWebページにリダイレクトする方法を解説

    JavaScriptを使えば、ボタンのクリックや特定の条件を満たしたタイミングで、ユーザーを別のWebページへ簡単に誘導（リダイレクト）できます。最も一般的なのは、window.location.href プロパティに移動先のURLを代入する方法です。 主なリダイレクトの方法 window.location.href = URL：最もシンプルで広く使われる方法です。 window.location.assign(URL)：hrefと同じ動作をし、ブラウザの履歴にも残ります。 window.location.replace(URL)：現在のページを置き換えるため、「戻る」ボタンで元のページに