页面自动跳转的实现方式探讨 | TID

最近新版财付通正式上线了，需要将用户切换到新版来，即需要将旧版的首页实现自动跳转的功能；首先，让我们一起来了解下网页自动跳转的常用实现方式有哪些吧！

方法一：使用meta标签
Meta标签是html不可缺少的标签之一，是用来在HTML文档中模拟HTTP协议的响应头报文；当我们定义属性http-equiv为refresh时，打开此WEB页，浏览器将根据content规定的值在指定时间内跳转到相应页面，content=”秒数;url=网址”就是定义停留多长时间后，跳转到指定的网址；
示例：
以下的meta标签告诉浏览器，5秒钟后，页面将自动跳转到新版财付通：

1	<meta http-equiv="refresh" content="5;url=https://www./v2/">

注意：
Meta元素只能在head元素使用；
Meta元素不会被渲染；
Meta元素不需要关闭标签；
方法二：使用javascript脚本
使用javascript跳转，有很多种实现方法，这里主要介绍window的location对象
1、location.href
例如：

1	<script type="text/javascript">

2	window.location.href = 'http://www./v2/';

3

</script>

2、location.replace
例如：

1	<script type="text/javascript">

2	window.location.replace('http://www./v2/');

3

</script>

方法三：301 / 302 重定向
301 / 302是一种http状态代码，当用户向网站服务器发送浏览请求时，由服务器端返回的一种状态代码；表示请求的页面被重定向到另一个地址；

Asp示例：

1	Response.Status = "301 Moved Permanently"

2	Response.AddHeader "Location", "网址”

Php示例：

1	header("HTTP/1.1 301 Moved Permanently");

2	header("Location: 网址");

Jsp示例：

1	response.setStatus(301);

2	response.setHeader("Location","网址");

下面对这三种实现方式做个对比：


从上表中可以看出，meta方式和javascript跳转方式会随浏览器平台不同，影响http请求头中的referer信息，这会给一些数据的统计带来误差；同时，脚本跳转的方式，除了location.replace外，其它的方式会“破坏”回退的功能，影响用户体验；所以对于这种新旧版切换的跳转，301重定向才是王道。