• 使用iframe实现导航栏在上面,下面的窗体刷新


    1、做一个导航栏,并设置跳转链接的<a>标签的name属性或id

    此处演示name标签

     <!-- 导航条 -->
    	<nav id="navAjax" class="navbar navbar-expand-lg navbar-dark bg-dark" style="z-index:10;"> 
    		<a class="navbar-brand">学生管理系统</a>
    		<button class="navbar-toggler" type="button" data-toggle="collapse" 
    			data-target="#navbarSupportedContent"
    			aria-controls="navbarSupportedContent" aria-expanded="false" 
    			aria-label="Toggle navigation">
    			<span class="navbar-toggler-icon"></span>
    		</button>
    
    		<div class="collapse navbar-collapse " id="navbarSupportedContent">
    			<ul class="navbar navbar-nav mr-auto container">
    				<li class="nav-item active"><a class="nav-link" name="">主页
    					<span class="sr-only">(current)</span>
    				</a></li>
    				<li class="nav-item"><a class="nav-link" href="#">基本信息</a></li>
    				<li class="nav-item dropdown"><a
    					class="nav-link dropdown-toggle" href="#" id="navbarDropdown"
    					role="button" data-toggle="dropdown" aria-haspopup="true"
    					aria-expanded="false"> 系统查询 </a>
    					<div class="dropdown-menu" aria-labelledby="navbarDropdown">
    						<a class="dropdown-item" href="#">基本信息</a> <a class="dropdown-item"
    							href="#">成绩信息</a>
    						<div class="dropdown-divider"></div>
    						<a class="dropdown-item" href="#">汇总信息</a>
    					</div></li>
    				<li class="nav-item" ><a name="changePassword.jsp" class="nav-link">修改密码</a></li>
    				<li class="nav-item col-6"></li>
    				<!-- session -->
    				<li class="nav-item mf-auto" >
    				<a id="loginSession" name="login.jsp" class="nav-link" tabindex="1" href="./login.jsp">登陆</a></li>
    				<li><a id="register" name="register.jsp" class="nav-link" >注册</a></li>
    				<!-- <script>userName("${session_user.name}");</script> -->
    			</ul>
    		</div>
    	</nav>
    

    2、创建iframe标签,并设置具体属性

    iframe各属性值参考如下链接:https://www.w3school.com.cn/tags/tag_iframe.asp

    <iframe src="" height="720px" width="100%" name="demo" frameborder="0" scrolling="no" 
    		sandbox="allow-same-origin allow-top-navigation allow-forms allow-scripts">
    </iframe>
    

    3、使用jq对每个窗体的事件进行绑定

    $(document).ready(function(){
    //设置并获取Session
    	localStorage.setItem("session_name", "${session_user.name}");
    	var name = localStorage.getItem("session_name");
    	// 判空
    	if(name == null || name == "" || name.length == 0){
    		// 设置成未登录状态
    		$("#loginSession").text("登录");
    		$("#register").text("注册");
    		$("#register").attr("name","register.jsp");
    		$("#register").attr("href","register.jsp");
    		$("#register").attr("target","_top");
    	}else{
    		// 登录成功
    		$("#loginSession").text(name);
    		$("#loginSession").attr("name","");// 取消点击事件
    		$("#register").text("退出");
    		$("#register").attr("name","LogoutServlet");
    	}
    	
    	// 导航栏点击,下面jframe的src改变,实现页面刷新功能
    	$("a").click(function(){ 
    		var src = $(this).attr("name");
    		$("iframe").attr("src",src);
    	});
    });
    

    4、对特殊的<a>标签进行处理

    这里是防止退出登录后重新登录产生两个导航栏,具体情况根据个人项目自行编写

    	// 对退出按钮绑定事件,只要点击该按钮,就恢复成注册按钮
    	$("#register").click(function(){
    		var name = $(this).attr("name");
    		if(name == "LogoutServlet"){
    			$("#loginSession").text("登录");
    			$("#register").text("注册");
    			$("#register").attr("name","register.jsp");
    			$("#register").attr("href","LogoutServlet");
    			$("#register").attr("target","_top");
    		}
    	});
    

    5、注意事项

    iframe出现两个导航栏时,设置对应<a>标签的target值解决,如上面代码中设置target值为"_top"。若部分<a>标签不跳转则可不设置标签的name属性或id也可以让name属性为空或id为空。
    若要测试这些代码,得导入bootstrap4得css和js包。

  • 相关阅读:
    错误日志记录代码
    将数组转换成datatable
    C#类头注释
    判断当前页面是否接收到了Get或者Post请求
    HttpRequestUtil类
    WeChatUtil类
    返回上一页
    更改同步异步
    限制只能输入数字
    判断浏览器及版本
  • 原文地址:https://www.cnblogs.com/windowsxpxp/p/12195498.html
Copyright © 2020-2023  润新知