JavaScript - 页面重定向

什么是页面重定向?

您可能遇到过这样的情况,即您点击了一个URL以到达页面X但在内部您被定向到另一个页面Y.它发生在页面重定向。此概念与 JavaScript页面刷新不同。

可能是您想要从原始页面重定向用户的各种原因。我们列出了一些原因和减号;

  • 您不喜欢您的域名,而您正在搬家一个新的。在这种情况下,您可能希望将所有访问者定向到新网站。在这里,您可以维护旧域,但可以将单个页面重定向,以便所有旧域访问者都可以访问您的新域。

  • 您有根据浏览器版本或其名称构建各种页面,或者可能基于不同的国家/地区,而不是使用服务器端页面重定向,您可以使用客户端页面重定向将用户放在适当的页面上。

  • 搜索引擎可能已将您的网页编入索引。但是在转移到另一个域时,您不希望通过搜索引擎丢失访问者。因此,您可以使用客户端页面重定向。但请记住,不应该欺骗搜索引擎,它可能导致您的网站被禁止。

Page Re如何-direction工作?

页面重定向的实现如下。

示例1

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

在线演示

<html>
   <head>
      <script type = "text/javascript">
         <!--
            function Redirect() {
               window.location = "https://www.it1352.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.it1352.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 main page in 10 sec.


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