JavaScript - 页面重定向

什么是页面重定向?

您可能遇到过这样的情况:您点击一个 URL 访问页面 X，但在页面内部却被定向到另一个页面 Y。这种情况是由于页面重定向造成的。这个概念与JavaScript 页面刷新不同。

您可能出于各种原因想要将用户从原始页面重定向。我们列出了其中一些原因 -

• 您不喜欢原来的域名，并且正在迁移到新域名。在这种情况下，您可能希望将所有访问者定向到新网站。您可以保留旧域名，但将单个页面设置为页面重定向，以便所有旧域名的访问者都能访问新域名。

• 如果您根据浏览器版本、名称或国家/地区构建了多个页面，那么您可以使用客户端页面重定向，而不是使用服务器端页面重定向，将用户引导至相应的页面。

• 搜索引擎可能已经将您的页面编入索引。但是，在迁移到其他域名时，您肯定不希望失去通过搜索引擎访问的访问者。因此，您可以使用客户端页面重定向。但请记住，这样做不应该是为了欺骗搜索引擎，否则可能会导致您的网站被禁止。

页面重定向如何运作?

页面重定向的实现如下。

示例 1

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

<html>
<head>
    <title>Page Redirection Example</title>
</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>
    <script type="text/javascript">
        function Redirect() {
            window.location = "https://www.cainiaomax.com";
        }
    </script>
</body>
</html>

示例 2

您可以在将网站访问者重定向到新页面之前向他们显示一条适当的消息。这需要一点时间来加载新页面。以下示例展示了如何实现相同的功能。其中，setTimeout() 是一个内置的 JavaScript 函数，可用于在给定的时间间隔后执行另一个函数。

<html>
<head>
    <title>Page Redirection Example</title>
</head>
<body>
    <p>You will be redirected to main page in 10 sec.</p>
    <script>
        function redirect() {
           window.location = "https://www.cainiaomax.com";
        }            
        setTimeout('redirect()', 10000);
    </script>
</body>
</html>

输出

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

示例 3

以下示例展示了如何根据网站访问者的浏览器将他们重定向到不同的页面。

<html>
<head>     
   <title>Browser Redirect</title>
</head>   
<body>
   <script type = "text/javascript">
      var browsername = navigator.appName;
      if( browsername == "Netscape" ) {
         window.location = "https://www.cainiaomax.com/javascript/index.html";
      } else if ( browsername =="Microsoft Internet Explorer") {
         window.location = "https://www.cainiaomax.com/articles/category/Javascript";
      } else {
         window.location = "https://www.cainiaomax.com/";
      }
   </script>      
</body>
</html>