項目中有多個jsp頁面用到同一個jsp頁面內容，因此我使用了jsp頁面內嵌jsp頁面。但問題出現了，當兩個jsp頁面分別在瀏覽器開啟時樣式是存在的，而頁面內嵌後樣式丟失
兩個jsp頁面單獨在瀏覽器顯示時樣式可以正常顯示。有頁面top.jsp和index.jsp，且在同一級目錄當頁面top.jsp嵌入到另外一個index.jsp頁面中時部分樣式會丟失在內嵌時我使用了幾種方法第一種： jsp指令<%@ include file="top.jsp"> 結果：部分樣式丟失第二種：iframe<Iframe src= "top.jsp " width= "100% " height= "100% " scroll= "no " frameborder= "0 " name= "content " > </iframe>結果：top部分的內容會被index.jsp內容遮擋住，而且index.jsp中的層顯示樣式依然丟失。 因為我的top.jsp中有一個隱藏的層，當點擊一個按鈕時這個層顯示。但是使用了iframe後只是將top.jsp頁面按結構嵌入到index.jsp中 (iframe元素的功能是在一個html內嵌一個文檔，建立一個浮動的幀。iframe可以嵌在網頁中的任意部分)，頁面編譯後是兩個單獨的頁面， 所以才會遮擋第三種：include動作<jsp:include page="top.jsp">結果：兩個頁面的層隱藏的樣式丟失 樣本： 當點擊中的“登陸”按鈕時 顯示效果： 但是使用了以上幾種內嵌方法都會出現問題，第一種和第三種是不顯示層，第二種顯示的層會被index.jsp中的內容遮擋。我在網上查詢的解決方案有很多種第一：路徑的問題（相對路徑和絕對路徑）：這個解決方案的原因是圖片可能不顯示獲得絕對路徑：1.在jsp頁面投中添加如下語句： <% String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"; request.setAttribute("basePath", basePath); %> 這樣就可以對個位置使用了，在其他頁面使用樣式表就可以寫成 <link rel="stylesheet" type="text/css" href="${basePath }css/right_content.css"> （或者也可以寫成這樣 <% String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"; %> <link rel="stylesheet" type="text/css" href="<%=basePath%>css/right_content.css"> 每個頁面都要獲得basePath的，因為這種獲得方式是儲存在page中。智能單個頁面使用 ）結果是：我的樣式都沒了第二：大小寫問題（html不區分大小寫，w3c關於html標準時全小寫。但是jsp中是分大小寫） w3c關於html的標準詳解串連：http://panjunlai.blog.163.com/blog/static/5819030120096255446267/ 我沒詳細瞭解過jsp的標準。但是jsp可以和servlet互動，所以和java一樣肯定區分大小寫。最終解決方案： top.jsp中<html>以及<body>標籤去掉 去掉標籤(只是top.jsp中去掉這幾個標籤，不要去其他東西)： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <link href="css/style.css" type="text/css" rel="stylesheet" /> <script type="text/javascript" src="js/jquery.1.9.1.min.js"></script> <script type="text/javascript" charset="utf-8" src="js/index.js"></script> <title>版面頭部</title> </head> <body> </body> </html>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
