主要代碼
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 （最好自己親手試一下，別怪我誤導了你哦！）