JavaScript - 页面重定向



什么是页面重定向?

您可能遇到过这样一种情况:您点击了一个 URL 以访问页面 X,但在内部您被定向到另一个页面 Y。这是由于页面重定向而发生的。此概念与 JavaScript Page Refresh 不同。

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

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

页面重定向如何运作?

Page-Redirection 的实现如下。

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

输出

You will be redirected to qikepu.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.qikepu.com/javascript/index.htm";
	 	 	 } else if ( browsername =="Microsoft Internet Explorer") {
	 	 	 	 	window.location = "https://www.qikepu.com/articles/category/Javascript";
	 	 	 } else {
	 	 	 	 	window.location = "https://www.qikepu.com/";
	 	 	 }
	 	</script> 	 	 	
</body>
</html>