您的位置：首页 > Web前端 > JavaScript

HTML页面中直接加载其他JSP页面

2016-07-04 14:09 671 查看

1.在经典的框架中填充页面时

　　

要填充2处的页面，2处为内容页面，是另外的一个JSP页面

2.左侧页面代码

　　

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>

<script type="text/javascript">
var loadPage = function(pageName){
var basePath = $("#basePath").val();

if(pageName=="blockZipUpload"){
$("#rightpage").css("padding-top","0");
$("#rightpage").html("<iframe style='border:none;width:100%;height:100%;' id='sacQuery_id' src='"+basePath+"pages/reportMessageQuery/reportMessageQuery.jsp'></iframe>");
        }

}

</script>
<style type="text/css">
#leftpage{
height:600px;
width:12%;
float:left;
border:solid 1px #CCC;
margin:0;
text-align:center;
padding:0px;
background-color:rgb(235,245,255);
}
.left_ul{
list-style-type:none;
margin:0;
text-align: left;
width:100%;
padding-top:20px;
padding-left:30px;
padding-right:0px;
padding-bottom:0px;
}
.left_ul li{
line-height:32px;
text-align:left;
}
.left_ul li a{
text-decoration:none;
color:#333;
font-size: 14px;
height:32px;
}
.left_ul li a:hover {
color : #7a9833;
background : inherit;
text-decoration : underline;
}

</style>

<div id="leftpage">
<ul class="left_ul">
<li><a href="#"    onclick="loadPage('blockZipUpload');">快速上传测试</a></li>
</ul>

</div>

3.右侧代码
　　

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

<%
String path = request.getContextPath();
String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
out.write("<input id='basePath' type='hidden' value='"+basePath+"'/>");
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>
<title>******</title>
<style type="text/css">
body{
width: 100%;
height:600px;
margin: 0 auto;
border:0;
padding:0;
font-family:"微软雅黑";
}

#rightpage{
width:87%;
height:100%;
border:0px;
float:left;
padding-top:160px;
}
.welcome_img{
margin:0 auto;
display: block;
}

table{
padding:0;
margin:0;
border-collapse:collapse;
border-spacing:0;
width:20%;
}
table td{
border:1px solid #a9bab9;
width:33.3%;
box-sizing:border-box;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
height:40px;
text-align:center;
font-size:12px;
color:#273335;
overflow:hidden;
background:#d4e3e7;
}
table .th td{
font-size:14px;
background:#bfdcde;
font-weight:bold;
}
table .trbg td{
background:#faff64;
}

</style>

<script type="text/javascript" src="../../js/jquery-1.11.3.min.js"></script>
<script type="text/javascript">

</script>
</head>
<body>
<%@include file="../commons/head.jsp" %>
<%@include file="../commons/leftpage.jsp" %>
<div id="rightpage">
<img class="welcome_img" src="../images/welcome.png">
</div>

</body>
</html>

4.头部模块代码
　　

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>

<script type="text/javascript" src="../js/jquery-1.11.3.min.js"></script>
<script type="text/javascript">

</script>
<style type="text/css">
#headpage{
height:120px;
width:100%;
border:1px solid #ccc;
background-image:url('../images/bj.jpg');
}
</style>

<div id="headpage">
</div>

5.pages/reportMessageQuery/reportMessageQuery.jsp 即为需要展示的JSP页面路径。

　　

　　

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航