JavaScript-ページリダイレクト

ページリダイレクトとは何ですか？

URLをクリックしてページXに到達したが、内部的には別のページYに誘導されたという状況に遭遇した可能性があります。 page redirection。この概念は、JavaScriptページの更新とは異なります。

元のページからユーザーをリダイレクトする理由はさまざまです。いくつかの理由をリストアップしています-

ドメインの名前が気に入らなかったため、新しいドメインに移動しています。このようなシナリオでは、すべての訪問者を新しいサイトに誘導することができます。ここでは、古いドメインを維持できますが、古いドメインの訪問者全員が新しいドメインにアクセスできるように、ページリダイレクトを使用して単一のページを配置できます。
ブラウザのバージョンや名前に基づいて、またはさまざまな国に基づいてさまざまなページを作成しました。サーバー側のページリダイレクトを使用する代わりに、クライアント側のページリダイレクトを使用してユーザーを適切なページに誘導できます。
検索エンジンはすでにあなたのページにインデックスを付けているかもしれません。しかし、別のドメインに移動している間、検索エンジンを介して来る訪問者を失いたくありません。したがって、クライアント側のページリダイレクトを使用できます。ただし、これは検索エンジンをだますために行うべきではないことに注意してください。サイトが禁止される可能性があります。

ページリダイレクトはどのように機能しますか？

ページリダイレクトの実装は次のとおりです。

例1

クライアント側でJavaScriptを使用してページリダイレクトを行うのは非常に簡単です。サイト訪問者を新しいページにリダイレクトするには、次のようにヘッドセクションに行を追加する必要があります。

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

出力

例2

新しいページにリダイレクトする前に、サイトの訪問者に適切なメッセージを表示できます。これには、新しいページをロードするために少しの時間遅延が必要になります。次の例は、同じものを実装する方法を示しています。ここにsetTimeout() は組み込みのJavaScript関数であり、指定された時間間隔の後に別の関数を実行するために使用できます。

<html>
   <head>
      <script type = "text/javascript">
         <!--
            function Redirect() {
               window.location = "https://www.tutorialspoint.com";
            }            
            document.write("You will be redirected to main page in 10 sec.");
            setTimeout('Redirect()', 10000);
         //-->
      </script>
   </head>
   
   <body>
   </body>
</html>

出力

You will be redirected to tutorialspoint.com main page in 10 seconds!

例3

次の例は、サイトの訪問者をブラウザに基づいて別のページにリダイレクトする方法を示しています。

<html>
   <head>     
      <script type = "text/javascript">
         <!--
            var browsername = navigator.appName;
            if( browsername == "Netscape" ) {
               window.location = "http://www.location.com/ns.htm";
            } else if ( browsername =="Microsoft Internet Explorer") {
               window.location = "http://www.location.com/ie.htm";
            } else {
               window.location = "http://www.location.com/other.htm";
            }
         //-->
      </script>      
   </head>
   
   <body>
   </body>
</html>