iframe的简单应用
这里附上自己做实验时所应用的代码：
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" href="http://www.jq22.com/jquery/font-awesome.4.6.0.css">
<link href="${pageContext.request.contextPath}/Resource/index_template/bootstrap.min.css" rel="stylesheet" type="text/css" />
<link href="${pageContext.request.contextPath}/Resource/index_template/frame.css" rel="stylesheet" type="text/css" />
<link href="${pageContext.request.contextPath}/Resource/index_template/leftnav.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="${pageContext.request.contextPath}/Resource/commonJs/jquery-2.1.0.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/Resource/index_template/hideMenu.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/Resource/index_template/leftnav.js"></script>
<link href="${pageContext.request.contextPath}/Resource/layer/skin/layer.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="${pageContext.request.contextPath}/Resource/layer/layer.js"></script>
<title>在线报考系统</title>
</head>
<body>
<div id="header">
<a class="logo" href="#">
在 线 报 考 系 统
<!-- <img src="img/logo.png"> -->
</a>
<div class="">
</div>
<div class="avatar">
<div style="margin-right:20px;margin-top:3px;">
<span>昵 称 : <span id="presentUserName"></span></span>
<i class="fa fa-chevron-down"></i>
</div>
<ul id="perFun" style="width:120px;">
<li data-src="${pageContext.request.contextPath}/Student_package/getStuInfo.jsp">个人信息</li>
<li data-src="${pageContext.request.contextPath}/Student_package/getStuInfo.jsp">修改密码</li>
<li onclick="log_out()">退出</li>
</ul>
<script type="text/javascript">
$("#perFun li").click(function(){
var src=$(this).attr("data-src");
$("#contentIframe").attr("src",src);
$("#perFun").css("display","none");
})
</script>
</div>
</div>
<div class="account-l fl">
<!-- <a class="list-title">账户概览</a> -->
<ul id="accordion" class="accordion">
<!-- 以下为一级管理员界面 -->
<li>
<div class="link"><i class="fa fa-user"></i>考试报名<i class="fa fa-chevron-down"></i></div>
<ul class="submenu">
<li id=""><a href="${pageContext.request.contextPath}/Student_package/Fill_qualification.jsp" target="contentIframe">填写审核资格</a></li>
<li id=""><a href="${pageContext.request.contextPath}/Student_package/enroll.jsp" target="contentIframe">报名</a></li>
</ul>
</li>
<li>
<div class="link"><i class="fa fa-leaf"></i>考试信息<i class="fa fa-chevron-down"></i></div>
<ul class="submenu">
<li id=""><a href="${pageContext.request.contextPath}/Student_package/view_seat.jsp">考场安排</a></li>
<li id=""><a href="${pageContext.request.contextPath}/Student_package/view_exam_atten.jsp">考试注意事项</a></li>
</ul>
</li>
<li>
<div class="link"><i class="fa fa-area-chart"></i>历史记录<i class="fa fa-chevron-down"></i></div>
<ul class="submenu">
<li id=""><a href="${pageContext.request.contextPath}/Student_package/review_log_history.jsp">登录记录查询</a></li>
</ul>
</li>
<li>
<div class="link"><i class="fa fa-list-ol"></i>成绩<i class="fa fa-chevron-down"></i></div>
<ul class="submenu">
<li id=""><a href="${pageContext.request.contextPath}/Student_package/view_score.jsp">成绩查询</a></li>
</ul>
</li>
<li>
<div class="link"><i class="fa fa-file-text"></i>用户手册<i class="fa fa-chevron-down"></i></div>
<ul class="submenu">
<li id=""><a href="${pageContext.request.contextPath}/Common_jsp/User_help.jsp" target="contentIframe">用户手册</a></li>
</ul>
</li>
</ul>
</div>
<iframe name="contentIframe1" id="contentIframe" src=""></iframe>
<script type="text/javascript">
$.ajax({
url:"${pageContext.request.contextPath}/get_user_info/getinfo",
data:{},
type:"post",
dataType:"JSON",
success:function(data) {
//console.log(data);
$("#presentUserName").text(data.StuName);
}
});
function log_out(){
$.ajax({
url:"${pageContext.request.contextPath}/log_and_register/log_out",
data:{},
type:"post",
dataType:"JSON",
success:function(data) {
if(data.status=="success")
window.location.replace("${pageContext.request.contextPath}/login.jsp");
window.history.back(-1);
}
});
}
</script>
</body>
</html>
具体效果如下：