• 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>
    
  • 相关阅读:
    pandas --index ,reindex, set_index, reset_index , reindex_like函数 之 reset_index
    pandas --index ,reindex, set_index, reset_index , reindex_like函数 之 reindex
    pandas 合并操作 append处理重复项
    pandas --合并操作concat函数和append
    pandas --合并操作join函数
    pandas 做合并操作-merge函数
    百度地图应用
    jstl 标签 的应用
    Linux 下MySQL 安装与卸载
    Linux 下tomcat的配置
  • 原文地址:https://www.cnblogs.com/develon/p/10706320.html
Copyright © 2020-2023  润新知