HTML 重定向页面跳转

2023-04-27 02:52•html•阅读 3560

通过响应头重定向

响应状态 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 >
<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 >
                <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>

上一篇 »HTTP中的重定向和请求转发的区别
下一篇 »php获取跳转后的真实链接