Path problems referencing external. css or. js files

Reprinted from: http://www.blogjava.net/Johnny-Ajun/archive/2011/06/16/352440.html When a JSP or HTML page references an external. css or. js file, pay attention to the problem of the road, if not set properly, will not refer to these external files
Suppose you use the following directory structure:-webapp
|-myproject Directory
|--webcontent Directory
|---scripts catalogue
---dtree.js file
|---styles Catalog
---main.css file
|---pages directory
---test.jsp file

Now for example, in test.jsp, refer to Main.css in the Dtree.js and styles directory under the scripts directory

There are several ways to do this:

1. Use relative paths to JSP pages
HTML code [Url=http://javatechnology.javaeye.com/blog/577469#][/url]

1. <link type= "text/css" rel= "stylesheet" href= ". /styles/main.css " />
2. <script type= "Text/javascript" src= ". /scripts/dtree.js "></script>

<link type= "Text/css" rel= "stylesheet" href= ". /styles/main.css "/><script type=" Text/javascript "src=". /scripts/dtree.js "></script>

This makes it possible to refer to Dtree.js and main.css when the page accesses test.jsp using HTTP://LOCALHOST:8080/MYPROJECT/TEST.JSP.

2. Use relative paths to Web projects
For the relative use of 1 in relation to the relative path of the JSP page, if we are setting the action to jump to the test.jsp page, then this way of using relative paths is not referenced.
For example, when we visit http://localhost:8080/MyProject/main.do, the page jumps to the test.jsp page, and if you use Method 1, you will not be quoted.
At this point we can use relative paths to the Web project to reference:
HTML code [Url=http://javatechnology.javaeye.com/blog/577469#][/url]

1. <link type= "text/css" rel= "stylesheet" href= "Styles/main.css" />
2. <script type= "Text/javascript" src= "scripts/dtree.js"></script>

<link type= "Text/css" rel= "stylesheet" href= "Styles/main.css"/><script type= "Text/javascript" src= "scripts /dtree.js "></script>

Note, however, that using Method 2 is a reference that is not referenced if you access http://localhost:8080/MyProject/test.jsp directly.

3. Use the absolute path of the Web project
Both Method 1 and Method 2 have shortcomings, both of which apply only one case, and are there two cases that apply? The answer is YES!
We use absolute paths:
HTML code [Url=http://javatechnology.javaeye.com/blog/577469#][/url]

1. <link type= "text/css" rel= "stylesheet" href= "/myproject/styles/main.css" />
2. <script type= "Text/javascript" src= "/myproject/scripts/dtree.js"></script>

<link type= "Text/css" rel= "stylesheet" href= "/myproject/styles/main.css"/><script type= "Text/javascript" Src= "/myproject/scripts/dtree.js" ></script>

This allows you to successfully reference either the http://localhost:8080/MyProject/main.do jump access test.jsp or the direct access to http://localhost:8080/MyProject/test.jsp.

Note: If we are deploying a Web app, the context Root is not set (typically configured as the project name), that is, the IP and port are not followed by the app name, such as Http://localhost:8080/main.do and http://localhost : 8080/test.jsp, this situation cannot be referenced with the project name, it should be:

HTML code [Url=http://javatechnology.javaeye.com/blog/577469#][/url]

1. <link type= "text/css" rel= "stylesheet" href= "/styles/main.css" />
2. <script type= "Text/javascript" src= "/scripts/dtree.js"></script>

<link type= "Text/css"  rel= "stylesheet"  href= "/styles/main.css"  /><script  Type= "Text/javascript"  src= "/scripts/dtree.js" ></script>