正文
HTML 重定向 页面跳转
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
通过响应头重定向
响应状态 301 和 302 可以指定重定向URL, 推荐使用302 FOUND
HttpServletResponse. static final int SC_MOVED_TEMPORARILY
状态代码（302），指示资源已临时移动到另一个位置，但未来的引用仍应使用原始URI来访问资源。 保留此定义是为了向后兼容。 SC_FOUND现在是首选定义。
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE HTML>
<%
/* 重定位状态分两种:
永久301 Moved Permanently和暂时302 Found
谨慎使用永久转移
*/
//response.setStatus(HttpServletResponse.SC_MOVED_TEMPORARILY);
response.setStatus(HttpServletResponse.SC_FOUND);
response.setHeader("Location", "indexs.jsp");
%>
通过元数据 meta 跳转页面
该方式可向用户显示提示信息, 推荐使用
注意, 如果refresh间隔时间太短或太长都会对用户造成困扰
<!DOCTYPE HTML>
<html lang="zh">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- 3秒后跳转页面 -->
<meta http-equiv="refresh" content="2;url='https://www.google.com'">
<title>3秒后进入主题</title>
<link rel="icon" href="icon/icon.ico">
<link rel="stylesheet" href="css/global.css">
<body>
<p style="text-align: center;">
<a href="https://www.google.com">点击立即进入</a>
</p>
</body>
</html>
事件 + JS 实现跳转
向 window 添加 onload 事件监听, 并重定位 document.location 到新的页面
该方法灵活性较高
-
立即跳转
在栈中不会有跳转页面
<script>
window.addEventListener("load", function (){
(window/document).location.(href) = "/speedtest"
});
</script>
<!-- 事实上这是多余的, 并且每个浏览器行为不一致, 可直接跳转 -->
<script>
document.location = "/speedtest"
</script>
-
延迟跳转
堆栈会留下跳转页面, 停留1s最佳
<script>
setTimeout(function () {
document.location = "/"
}, 1000)
</script>
该方式可向用户显示提示信息, 推荐使用
注意, 如果refresh间隔时间太短或太长都会对用户造成困扰
<!DOCTYPE HTML>
<html lang="zh">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- 3秒后跳转页面 -->
<meta http-equiv="refresh" content="2;url='https://www.google.com'">
<title>3秒后进入主题</title>
<link rel="icon" href="icon/icon.ico">
<link rel="stylesheet" href="css/global.css">
<body>
<p style="text-align: center;">
<a href="https://www.google.com">点击立即进入</a>
</p>
</body>
</html>
向 window 添加 onload 事件监听, 并重定位 document.location 到新的页面
该方法灵活性较高
-
立即跳转
在栈中不会有跳转页面
<script>
window.addEventListener("load", function (){
(window/document).location.(href) = "/speedtest"
});
</script>
<!-- 事实上这是多余的, 并且每个浏览器行为不一致, 可直接跳转 -->
<script>
document.location = "/speedtest"
</script>
-
延迟跳转
堆栈会留下跳转页面, 停留1s最佳
<script>
setTimeout(function () {
document.location = "/"
}, 1000)
</script>
