HTML页面中直接加载其他JSP页面
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页面路径。
HTML页面中直接加载其他JSP页面的更多相关文章
- MVC中 _ViewStart _Layout Index三个页面中的加载顺序
MVC学习中忽然想到一个问题.. 在访问一个Index.cshtml页面时, MVC的加载顺序是怎么样的呢? 首先说下我的结论 . _ViewStart.cshtml . Index.cshtml . ...
- 页面滚动动态加载数据，页面下拉自动加载内容 jquery
<!DOCTYPE=html> <html> <head> < script src="js/jquery.js" type=" ...
- Jquery页面滚动动态加载数据，页面下拉自动加载内容
<!DOCTYPE=html> <html> <head> <script src="js/jquery.js" type="t ...
- 用于确保页面中js加载完全，对于优化某网页的加载速度，有什么见解
js方法: <script type="text/javascript"> window.onload = function(){ var userName = &qu ...
- 页面爬虫（获取其他页面HTML）加载到自己页面
//前台 <div id="showIframe"></div> $(document).ready(function() { var url = &quo ...
- easyui学习笔记5—panel加载其他的页面
上一篇中我们看到了panel的基本实现,没有什么难度,最重要的是data-options和class两个标签属性的定义.这里我们将看一下在panel中如何加载其他的页面. 1.先看看引用的资源文件和h ...
- easyui学习笔记8—在手风琴中加载其他的页面
在手风琴中加载其他页面和在表格中加载其他的页面有写类似的,就是请求另外一个页面显示数据. 1.先看看引用的资源文件 <link rel="stylesheet" href=& ...
- 过滤器解决hibernate中懒加载问题
使用过滤器解决懒加载问题需要我们对过滤器的生命周期有深刻的理解 1.浏览器发送一个请求 2.请求通过过滤器执行dofilter之前的代码 3.浏览器通过过滤器到达Servlet(注意我们这里的serv ...
- JS实现-页面数据无限加载
在手机端浏览网页时,经常使用一个功能,当我们浏览京东或者淘宝时,页面滑动到底部,我们看到数据自动加载到列表.之前并不知道这些功能是怎么实现的,于是自己在PC浏览器上模拟实现这样的功能.先看看浏览效果: ...
随机推荐
- vue项目中使用地图组件
一.引入高德地图 一般用使用vue-cli webpack最简单粗暴的引入地图api的方法就是,在入口index.html的头部直接引入,记得一定要带上key,如果没有的话去高德地图api的官网申请一 ...
- 使用ERStudio创建数据表与ER图
内容中包含 base64string 图片造成字符过多,拒绝显示
- CocoSourcesCS 1
CocoSourcesCS 1 /*------------------------------------------------------------------------- Compiler ...
- LeetCode 137 Single Number II（仅仅出现一次的数字 II）（*）
翻译 给定一个整型数组,除了某个元素外其余的均出现了三次. 找出这个元素. 备注: 你的算法应该是线性时间复杂度. 你能够不用额外的空间来实现它吗? 原文 Given an array of inte ...
- 我的Android进阶之旅------>Android关于TextWatcher的初步了解
首先来看一下TextWatcher的源码 package android.text; /** * When an object of a type is attached to an Editable ...
- IE测试CSS兼容性测试
我们知道IE6~8是现在浏览器的主流.但是由IE6开始,我们已经知道IE并不是完全执行W3C标准.我们在编程的时候往往遇到只兼容某一种浏览器. 我们以前经常使用IE Test进行IE的兼容性测试.但是 ...
- apache无法启动：The request operation has failed
apache无法启动提示the requested operation has failed 的错误信息,有以下几种解决方法:1.80端口占用 apache默认使用的端口是80,而IIS和迅雷用的也是 ...
- redis3.0.6安装配置
运行linux客户端 1 安装依赖 yum install gcc-c++ -y(安装gcc) 2 创建安装目录.编译.安装 mkdir -p /usr/local/redis(创建安 ...
- php遍历文件夹代码实现
<?php //遍历文件夹 function my_scandir($dir){ $files = array(); if (is_dir($dir)){ if($handle = opendi ...
- ant 重置（修改）DatePicker MonthPicker Cascader 的值
1.清空值 this.props.form.resetFields(); 2.监听 props 的变化,触发 清空按钮 .