JSP embedded JSP style is lost, when two JSP Independent display style has a problem solution

Source: Internet
Author: User

The project has multiple JSP pages that use the same JSP page content. Therefore, I use JSP pages embedded with JSP pages. However, when the two JSP pages are opened in the browser, the style exists, and the style is lost after the page is embedded.

When the two JSP pages are displayed separately in the browser, the style can be displayed normally. There are top pages. JSP and index. JSP, and top the page in the same level directory. JSP is embedded into another index. some styles on the JSP page will be lost. I used several methods when embedded. First, the JSP command <% @ include file = "Top. JSP "> result: Some styles are lost. Type 2: IFRAME <IFRAME Src = "Top. jsp" Width = "100%" Height = "100%" Scroll = "no" Frameborder = "0" Name = "content" > </Iframe>Result: The content of the top part is blocked by the content of index. jsp, and the layer display style in index. jsp is still lost. Because there is a hidden layer in my top. jsp, this layer is displayed when a button is clicked. However, after IFRAME is used, the top. jsp page is embedded in index. jsp by structure (the function of IFRAME element is to embed a document in an HTML file and create a floating frame. IFRAME can be embedded in any part of the webpage). After the page is compiled, it is two separate pages, so it blocks the third: include action <JSP: Include page = "Top. JSP "> result: Examples of loss of hidden styles on two pages: When you click the" login "button, the effect is displayed. However, problems may occur when you use the above embedded methods, the first and third types are non-display layers, and the second type of display layer is indexed. content blocking in JSP. There are many solutions I can query online: Path Problems (relative paths and absolute paths): the reason for this solution is that the image may not be displayed to obtain the absolute path: 1. add the following statement to the JSP page: <% string Path = request. getcontextpath (); string basepath = request. getscheme () + ": //" + request. getservername () + ":" + request. getserverport () + path + "/"; request. setattribute ("basepath", basepath); %> in this way, you can use a style sheet on other pages to write <LINK rel = "stylesheet" type = "text/CSS" href = "$ {basepath} CSS/right_content.css"> (or you can also write it in this way, <% stri Ng Path = request. getcontextpath (); string basepath = request. getscheme () + ": //" + request. getservername () + ":" + request. getserverport () + path + "/"; %> <LINK rel = "stylesheet" type = "text/CSS" href = "<% = basepath %> CSS/right_content.css"> Get basepath for each page, because this method is stored in the page. The result of smart single page usage is: My styles are gone. Second, the Case sensitivity problem (HTML is case insensitive and W3C is case-insensitive when it comes to HTML standards. But JSP is case sensitive) W3C on the HTML standard detailed connection: http://panjunlai.blog.163.com/blog/static/5819030120096255446267/ I did not have a detailed understanding of JSP standards. However, jsp can interact with Servlet, so it must be case sensitive like Java. Final Solution: remove the <HTML> and <body> labels in top. jsp (only remove the labels in top. jsp and do not go to other items): <! 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">

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.