iframe分块引入代码
后台系统通常的布局是
1、header头部（包含网站Logo和名称，用户名，退出，消息）
2、leftNav左侧导航（有些需要根据权限不同用户显示不同的导航）
3、footer脚部门，显示copyright或者联系我们等信息
4、content主要内容部门
点击左侧导航动态切换到对应的页面。对于手头上用的项目，没有使用react和vue或者angular等框架，就用的是基本的jsp页面+jquery库+手写样式。
需求：
点击左侧导航，进入对应页面，头部、左侧导航和脚部门不刷新；
代码实现
用户登录系统后，默认进入的欢迎页面作为页面框架，通过jsp的include标签引入公共的头部jsp，导航jsp（渲染出来后台根据权限返回的左侧导航列表），主体内容用iframe引入。在该页面增加js控制：点击左侧的导航，动态替换iframe的src属性来切换显示，并为当前选中导航设置选中状态。
//
<%@ page contentType="text/html;charset=utf-8"%>
<%@ include file="/WEB-INF/jsp/include.jsp"%>
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>欢迎登录</title>
<link rel="stylesheet" href="${rootUrl}css/style1.css" />
<link rel="stylesheet" href="${rootUrl}css/enterpriseList.css" />
</head>
<body>
<!-- 主体内容区域 -->
<!-- 公共头部 -->
<%@ include file="/WEB-INF/jsp/header.jsp"%>
<div class="main clearfix">
<!-- 公共左侧导航 -->
<%@ include file="/WEB-INF/jsp/leftMenu.jsp"%>
<div class="maincontent">
<%--iframe引入对应的jsp页面--%>
<iframe src="${rootUrl}mainWelcome.htm" id="iframeDom" frameborder="0" scrolling="auto" width="100%" height="100%"></iframe>
</div>
<script src="${rootUrl}js/jquery-1.7.2.js"></script>
<script src="${rootUrl}js/base.js"></script>
<script>
//导航默认收起
$('.navbox .nav_top').removeClass('active');
$('.navbox').css({'height':'50px','overflow':'hidden'});
$('.nav_bottom li').removeClass('active')
$(function(){
//页面加载完成后，点击左侧导航，切换iframe的src，更换页面
$('.leftmenu .nav_bottom a').click(function(){
var menuHref = $(this).attr('data-href');
$('#iframeDom').attr('src','${rootUrl}'+menuHref);
$('.nav_bottom li').removeClass('active');
$(this).parent('li').addClass('active');
$('.nav_top').removeClass('active');
$(this).parents('.navbox').find('.nav_top').addClass('active');
});
//点击一级导航后，展开二级导航
$('.leftmenu .nav_top').click(function() {
var sHeight = $(this).siblings('.nav_bottom').find('li')
.height();
var nHeight = $(this).parent().height();
var num = ($(this).siblings('.nav_bottom').find('li').length)
+ 1;
if (nHeight > sHeight) {
$(this).parent().css('overflow', 'hidden').stop().animate({
'height' : sHeight + 'px'
}, 300);
} else {
$('.navbox').css('overflow', 'hidden').stop().animate({
'height' : sHeight + 'px'
}, 300);
$(this).parent().stop().animate({
'height' : (sHeight * num) + 'px'
}, 300);
}
});
})
</script>
</div>
</body>
</html>
除了上述这种切换导航而不刷新整个页面，是否还有别的方法，仍在继续探索。