Javascript 简明教程

JavaScript - Page Redirection

What is Page Redirection?

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

You might have encountered a situation where you clicked a URL to reach a page X but internally you were directed to another page Y. It happens due to page redirection. This concept is different from JavaScript Page Refresh.

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

There could be various reasons why you would like to redirect a user from the original page. We are listing down a few of the reasons −

  1. You did not like the name of your domain and you are moving to a new one. In such a scenario, you may want to direct all your visitors to the new site. Here you can maintain your old domain but put a single page with a page redirection such that all your old domain visitors can come to your new domain.

  2. You have built-up various pages based on browser versions or their names or may be based on different countries, then instead of using your server-side page redirection, you can use client-side page redirection to land your users on the appropriate page.

  3. The Search Engines may have already indexed your pages. But while moving to another domain, you would not like to lose your visitors coming through search engines. So you can use client-side page redirection. But keep in mind this should not be done to fool the search engine, it could lead your site to get banned.

How Page Re-direction Works?

页面重定向的实现如下。

The implementations of Page-Redirection are as follows.

Example 1

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

It is quite simple to do a page redirect using JavaScript at client side. To redirect your site visitors to a new page, you just need to add a line in your head section as follows.

<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 函数， 可用于在给定时间间隔后执行另一个函数。

You can show an appropriate message to your site visitors before redirecting them to a new page. This would need a bit time delay to load a new page. The following example shows how to implement the same. Here setTimeout() is a built-in JavaScript function which can be used to execute another function after a given time interval.

<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

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

The following example shows how to redirect your site visitors onto a different page based on their browsers.

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