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