Javascript-page-redirect

提供:Dev Guides
移動先:案内検索

JavaScript-ページのリダイレクト

ページリダイレクトとは

URLをクリックしてページXにアクセスしたが、内部的に別のページYにリダイレクトされたという状況に遭遇した可能性があります。 *ページのリダイレクト*が原因で発生します。 この概念は、link:/javascript/javascript_page_refresh [JavaScript Page Refresh]とは異なります。

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

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

ページリダイレクトの仕組み

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

例1

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

<html>
   <head>
      <script type = "text/javascript">
         <!--
            function Redirect() {
               window.location = "https://www.finddevguides.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.finddevguides.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 finddevguides.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";
            } else if ( browsername =="Microsoft Internet Explorer") {
               window.location = "http://www.location.com/ie";
            } else {
               window.location = "http://www.location.com/other";
            }
        //-->
      </script>
   </head>

   <body>
   </body>
</html>