JavaScript 页面重定向

什么是页面重定向

您可能曾经遇到点击一个URL以到达页面X，但在内部被重定向到另一个页面Y的情况。这是由于 页面重定向 引起的。此概念不同于JavaScript页面刷新。

有多种原因可能会导致您希望将用户从原始页面重定向。以下列出了一些原因：

您不喜欢您的域名名称，正准备更换新的域名。在这种情况下，您可能希望将所有访问者重定向到新站点。您可以保留旧域名，但放置一个页面重定向的单页，以便使所有旧域名的访问者可以访问您的新域名。
您已根据浏览器版本、名称或不同国家/地区构建了各种页面，那么您可以使用客户端页面重定向而不是服务器端页面重定向，以将用户导向适当的页面。
搜索引擎可能已经索引了您的页面。但是在转移到另一个域时，您不希望失去通过搜索引擎过来的访问者。因此，您可以使用客户端页面重定向。但请记住不要为了愚弄搜索引擎而这样做，否则可能会导致您的网站被封禁。

页面重定向的原理

页面重定向的实现如下。

示例1

使用JavaScript在客户端进行页面重定向非常简单。要将您的网站访问者重定向到新页面，您只需在head部分添加以下一行代码。

<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>