教程 > Javascript 教程 > Javascript 基础 阅读：39

Javascript 页面重定向

什么是页面重定向

可能遇到过这样的情况：当你单击 URL 到达页面 X，但在内部却被定向到另一个页面 Y。这是由于页面重定向而发生的。这个概念不同于JavaScript 页面刷新。

下面是一些可能的在页面加重定向的原因

  • 不喜欢您的域名，并且您正在迁移到一个新域名。在这种情况下，您可能希望将所有访问者引导至新站点。在这里，您可以维护旧域域名，但放置一个带有页面重定向的页面，以便所有旧域访问者都可以访问您的新域。
  • 您已经根据浏览器版本或其名称构建了各种页面，或者可能基于不同的国家/地区，然后您可以使用客户端页面重定向来代替使用服务器端页面重定向，从而将您的用户引导到适当的页面上。
  • 搜索引擎可能已经将您的网页编入索引。但是在转移到另一个域时，您不希望失去通过搜索引擎访问的访问者。所以你可以使用客户端页面重定向。但请记住，这不应该是为了欺骗搜索引擎，它可能会导致您的网站被禁止。

页面重定向如何工作？

示例 1

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

<html>
   <head>
      <script type = "text/javascript">
         <!--
            function Redirect() {
               window.location = "https://www.jiyik.com";
            }
         //-->
      </script>
   </head>
   
   <body>
      <p>点击下面的按钮，你将会被重定向到主页</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.jiyik.com";
            }            
            document.write("You will be redirected to main page in 10 sec.");
            setTimeout('Redirect()', 10000);
         //-->
      </script>
   </head>
   
   <body>
   </body>
</html>

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

查看笔记

扫码一下
查看教程更方便