使用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包。

巴特西

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

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

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

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

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

5、注意事项

最新文章

热门文章