iframe分块引入代码
后台系统通常的布局是
1、header头部(包含网站Logo和名称,用户名,退出,消息)
2、leftNav左侧导航(有些需要根据权限不同用户显示不同的导航)
3、footer脚部门,显示copyright或者联系我们等信息
4、content主要内容部门
点击左侧导航动态切换到对应的页面。对于手头上用的项目,没有使用react和vue或者angular等框架,就用的是基本的jsp页面+jquery库+手写样式。
需求:
点击左侧导航,进入对应页面,头部、左侧导航和脚部门不刷新;
iframe自适应页面高度,避免出现多个滚动条
代码实现
用户登录系统后,默认进入的欢迎页面作为页面框架,通过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"%>