主要代码

hjzgg.css

.center-div{
width:auto;
margin-left: 40%;
margin-right: 40%;
display: block;
position: absolute;
top:0px;
left:0px;
} .text-div{
margin-top: 80px;
} .hjzgg-div{
color:transparent;
font-size:20px;
font-weight: bold;
letter-spacing:2px;
-webkit-animation-duration: 3s;
-webkit-animation-fill-mode: forwards;
-webkit-animation-name: hjzgg-move;
float:left;
} .hjzgg-div-delay-1{
-webkit-animation-delay: 1s;
} .hjzgg-div-delay-2{
-webkit-animation-delay: 2s;
} .hjzgg-div-delay-3{
-webkit-animation-delay: 3s;
} .hjzgg-div-delay-4{
-webkit-animation-delay: 4s;
} .hjzgg-div-delay-5{
-webkit-animation-delay: 5s;
} .hjzgg-div-delay-6{
-webkit-animation-delay: 6s;
} @-webkit-keyframes hjzgg-move{
from{
margin-top: -35px;
} to{
margin-top: 10px;
color:#000000;
text-shadow: 2px 2px 3px #222222;
}
}

cssTestOne.jsp

<%@ 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">
<title>页面包含</title>
<link rel="stylesheet" type="text/css" href="css/hjzgg.css" />
<script>
var x = "hjzgg_one";
</script>
<style type="text/css">
.my-p{
color:red;
font-size:40px;
text-shadow: 2px 2px 3px #222222;
text-align: center;
}
</style>
</head>
<%
String x = "hjzgg_one";
%>
<body>
<div class="center-div">
<div class="hjzgg-div">CSS</div>
<div class="hjzgg-div hjzgg-div-delay-1">样</div>
<div class="hjzgg-div hjzgg-div-delay-2">式</div>
<div class="hjzgg-div hjzgg-div-delay-3">覆</div>
<div class="hjzgg-div hjzgg-div-delay-4">盖</div>
<div class="hjzgg-div hjzgg-div-delay-5">测</div>
<div class="hjzgg-div hjzgg-div-delay-6">试</div>
</div> <div class="text-div">
<p class="my-p">大家好,我是HJZGG</p>
</div>
<%@include file="cssTestTwo.jsp" %> <%-- 测试css样式覆盖
<jsp:include page="cssTestTwo.jsp" flush="true"/>
<iframe src="cssTestTwo.jsp" style="width:100%;"></iframe>
--%> <script>
alert("<%=x%>");
</script>
</body>
</html>

效果图:

cssTestTwo.jsp

<%@ 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">
<title>页面包含</title>
<script>
var x = "hjzgg_two";
</script>
<style type="text/css">
/* .my-p{
color:green;
font-size:20px;
text-align: center;
} */
</style>
</head>
<%//测试java同名变量
//String x = "hjzgg_one";
%>
<body>
<div class="text-div">
<p class="my-p">大家好,我是HJZGG</p>
</div>
<script>
alert("<%=request.getParameter("hjzgg")%>");
</script>
</body>
</html>

效果图:

  

css覆盖测试:

  执行cssTestOne.jsp中的<%@include file="cssTestTwo.jsp" %> 或者 <jsp:include page="cssTestTwo.jsp" flush="true"/>,由于cssTestOne.jsp和cssTestTwo.jsp中都定义了.my-p的样式,被包含进来的页面中定义的样式会覆盖主页面的样式。
  如果不想造成样式的混乱,最好还是将每个页面的样式区分开来。或者通过执行<iframe src="cssTestTwo.jsp" style="width:100%;"></iframe>,不会导致页面的样式的覆盖。

js中同名变量问题:

  首先在两个文件<head></head>之间加入同名js变量x,例如:分别加入<script>var x = "hjzgg_one";</script>和<script>var x = "hjzgg_tow";</script>, 然后在主页面中进行如下操作:include前调用js的alert(x) 以及 include调用后的alert(x)。

  发现是可以允许有同名的js变量的,无论是<jsp:include page="cssTestTwo.jsp" flush="true"/>,还是<%@include file="cssTestTwo.jsp" %>。如果在include之前访问同名变量,则访问的主页面的变量,否则访问的被包含页面的变量。

java同名变量问题:

  首先在两个文件<head>和<body>之间加入同名java变量x,例如:分别加入<%String x = "hjzgg_one";%>和<%String x = "hjzgg_two";%>,然后分别调用<jsp:include page="cssTestTwo.jsp" flush="true"/>和<%@include file="cssTestTwo.jsp" %>。然后在include之后执行alert("<%=x%>");

  发现在加入<%@include file="cssTestTwo.jsp" %>(静态包含),编译器就已经通知有“变量重名的错误”。而通过<jsp:include page="cssTestTwo.jsp" flush="true"/>(动态包含)不仅不会,而且正常运行。

  分析一下:<%@include file="cssTestTwo.jsp" %>引入静态文本,在JSP页面被转化成servlet之前和它融和到一起.先包含,后编译,不会检查所含文件的变化,适用于包含静态页面,可以理解为纯粹是把代码写在外面的一种共享方法,所有的变量都是可以和include它的主文件共享, 两者高度紧密结合,不能有变量同名的冲突。而页面设置也可以借用主文件的。 <jsp:include page="cssTestTwo.jsp" flush="true"/>引入执行页面或servlet所生成的应答文本. 被包含的文件先编译,后包含进来,然后显示。

  为了验证上面的分析,首先找到这样的一个目录(即Tomcat jsp生成的java文件位置),先找到你的eclipse workspace,然后会有子目录:.metadata\.plugins\org.eclipse.wst.server.core\tmp0\work\Catalina\localhost,在这个目录里会看见你的项目目录,例如我的项目目录名是“cssTest”,然后一路的找下去,最终有一个名称为"jsp"的目录(最终目录:F:\eclipseEE_workspace\.metadata\.plugins\org.eclipse.wst.server.core\tmp0\work\Catalina\localhost\cssTest\org\apache\jsp),这里就是存放jsp转成servlet(java文件)的地方。

测试1

   将之前添加的各种变量语句统统去掉, include语句也去掉, 并将刚才找到的目录的文件删除,接着在浏览器中访问cssTestOne.jsp这个页面。目录里多了两个文件,如下图所示:

  

测试2

   再将目录中的文件删除,并在主页面中加入<%@include file="cssTestTwo.jsp" %>,接着在浏览器中访问cssTestOne.jsp这个页面。目录中的内容如下图所示,注意,对应文件的大小发生了变化。

测试3

   再将目录中的文件删除,删除<%@include file="cssTestTwo.jsp" %>,并在主页面中加入<jsp:include page="cssTestTwo.jsp" flush="true"/>,接着在浏览器中访问cssTestOne.jsp这个页面。目录中的内容如下图所示,注意,目录中多了被包含jsp的.class文件和.java文件。

总结:

  1.动态include和静态include都和include它的页面的request范围是一致。而<iframe>范围不一致。

  2.动态include和静态include都允许有同名的js变量

  3.动态include中允许有java的同名变量,而静态include中不允许有java的同名变量。

动态INCLUDE

  说明:它总是会检查所含文件中的变化,适合用于包含动态页面,并且可以带参数,先编译之后再进行处理。

  原因:1、静态include的结果是把其他jsp引入当前jsp,两者合为一体。

     2、静态include纯粹是把代码写在外面的一种共享方法,所有的变量都是可以和include它的主文件共享,两者高度紧密结合,不能有变量同名的冲突.而页面设置也可以借用主文件的.

静态INCLUDE

  说明:用include伪码实现,定不会检查所含文件的变化,适用于包含静态页面,直接将内容先包含后处理。

  原因:1、动态include的结构是两者独立,直到输出时才合并。

     2、动态include的jsp文件独立性很强,是一个单独的jsp文件,需要使用的对象,页面设置,都必须有自己创建,当然,还好它和include它的页面的request范围是一致的。

测试项目地址

  https://github.com/hjzgg/jspIncludeTest (最好自己亲手试一下,别怪我误导了你哦!)

静态Include和动态Include测试并总结的更多相关文章

  1. jsp中静态include和动态include的区别

    jsp中静态include和动态include的区别 动态 INCLUDE 用 jsp:include 动作实现 <jsp:include page="included.jsp&quo ...

  2. 静态include与动态include的区别

    jsp中的include有两种形式,分别是:<%@ include file=""%><jsp:include page="" flush=& ...

  3. JSP静态include和动态include的区别

    静态include是指令元素.include指令的语法格式:<%@ include file="filename" %>.include指令的作用是在JSP页面中静态包 ...

  4. Jsp的include指令静态导入和动态导入的区别

    1.什么是静态导入? 静态导入指的是,将一个外部文件嵌入到当前JSP文件中,同时解析这个页面的JSP语句,它会把目标页面的其他编译指令也包含进来. include的静态导入指令使用语法: <%@ ...

  5. JSP中动态include和静态include区别

    静态include(<%@ include file=""%>): 静态include(静态导入)是指将一个其他文件(一个jsp/html)嵌入到本页面 jsp的inc ...

  6. jsp里面include的静态导入和动态导入的区别

    静态导入就是将被导入页面完全融入到导入的页面中:而动态导入只是在servlet里面插入了include方法,导入的这是被导入页面的body标签里面的内容 1.什么是静态导入? 静态导入指的是,将一个外 ...

  7. JSP中动态INCLUDE与静态INCLUDE的区别

    动态INCLUDE 用法: <jsp:include page="included.jsp" flush="true" /> 说明: 它总是会检查所 ...

  8. JSP中动态include和静态include的区别(简版)

    动态的include: 用法:<jsp:include page="1.jsp" flush="true" /> 特点:行为元素,可以带参数:先编译 ...

  9. jsp动态include和静态Include

    动态 INCLUDE 用 jsp:include 动作实现 <jsp:include page="included.jsp" flush="true" / ...

随机推荐

  1. [ACM训练] 算法初级 之 搜索算法 之 广度优先算法BFS (POJ 3278+1426+3126+3087+3414)

    BFS算法与树的层次遍历很像,具有明显的层次性,一般都是使用队列来实现的!!! 常用步骤: 1.设置访问标记int visited[N],要覆盖所有的可能访问数据个数,这里设置成int而不是bool, ...

  2. Spark ZooKeeper数据恢复

    Spark使用ZooKeeper进行数据恢复的逻辑过程如下: 1.初始化:创建<CuratorFramwork,LeaderLatch,LeaderLatchListener>用于选举 创 ...

  3. oracle表空间简单学习

    1.重命名表空间:alter tablespace 原表空间名 rename to 新表空间名ps:(1)system 和sysaux表空间不能重名(2)如果该表空间中任何一个数据出于脱机状态或者表空 ...

  4. Cocopod

    装了好几天,这个是比较全面的,大家可以看看帮助一下 1.新建一个项目,名称:CPTest 2.打开终端,输入"cd"+空格,然后将文件夹拖入到后面 3.回车后继续输入vim Pod ...

  5. 为什么我如此热爱这样一个比赛(转自vici)

    为什么我如此的热爱这样一个比赛呢?因为它总能带给我一个目标,让我去努力实现它.因为可以看到胜利的希望,于是不断的去追逐.虽然其中的过程可能是比较艰辛的.   对于天才选手,作为天生的冠军,大概凭借天赋 ...

  6. Python之路【第七篇】python基础 之socket网络编程

    本篇文章大部分借鉴 http://www.cnblogs.com/nulige/p/6235531.html python socket  网络编程 一.服务端和客户端 BS架构 (腾讯通软件:ser ...

  7. Windows下搭建Spark+Hadoop开发环境

    Windows下搭建Spark+Hadoop开发环境需要一些工具支持. 只需要确保您的电脑已装好Java环境,那么就可以开始了. 一. 准备工作 1. 下载Hadoop2.7.1版本(写Spark和H ...

  8. 百度编辑器ueditor的简单使用

    最近刚被分配了以个消息发布的任务,其中用到了富文本编辑器.以前也用过,不过这次我选择的是百度富文本编辑器ueditor1_4_3-utf8-jsp版的. 其实看ueditor功能很强大,不过百度的设计 ...

  9. DataTable转List(备忘)

    public static List ToList(DataTable dt) { List<Dictionary<string, object>> list = new Li ...

  10. 字节流与数据类型的相互转换---使用struct模块

    字节流与数据类型的相互转换---使用struct模块 http://blog.csdn.net/Sunboy_2050/article/details/5974029 Python是一门非常简洁的语言 ...