Javascript 简明教程

JavaScript - Page Redirection

What is Page Redirection?

您可能遇到过如下情况，点击了一个 URL 以访问页面 X，但您在内部被导向了另一个页面 Y。这种情况是 page redirection 导致的。这个概念不同于 JavaScript Page Refresh 。

您希望将用户从原始页面重定向的原因可能有多种。我们列出了其中一些原因 -

您不喜欢自己域的名称，并且您要移动到一个新名称。在这种情况下，您可能希望将所有访问者都定向到新网站。您可以保留旧域，但放置一个带重定向页面的页面，这样旧域的所有访问者都可以访问您的新域。
你根据浏览器版本或名称或不同国家建立了不同的页面，然后你可以使用客户端页面重定向将用户转到适当的页面，而不是使用服务器端页面重定向。
搜索引擎可能已编入你的页面索引。但在移到另一个域时，你肯定不希望失去通过搜索引擎访问你网站的访问者。因此，你可以使用客户端页面重定向。但请记住，不要使用此方法来愚弄搜索引擎，这样做可能会导致你的网站被屏蔽。

How Page Re-direction Works?

页面重定向的实现如下。

Example 1

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

<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.tutorialspoint.com";
        }
    </script>
</body>
</html>

Example 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.tutorialspoint.com";
        }
        setTimeout('redirect()', 10000);
    </script>
</body>
</html>

Output

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

Example 3

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

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