引用外部.css或.js文件的路径问题

jsp

或

html

页面引用外部

.css

或

.js

文件时，注意路劲问题，如果设置不当，会

引用不到这些外部的文件

 

假设使用下面的目录结构：

 

-webapp  

|-MyProject  

目录

  

 |--WebContent

目录

 

  

|---scripts 

目录

 

   

---dtree.js 

文件

 

  

|---styles 

目录

 

   

---main.css 

文件

  

  

|---pages 

目录

 

   

---test.jsp

文件

 

  

现在例如要在

test.jsp

中引用

scripts

目录下的

dtree.js

和

styles

目录下的

main.css

 

  

有如下几种方法：

 

  

  

  

1.

使用相对于

jsp

页面的相对路径

 

Html

代码

  

 

1.

 

<link

 

type

=

"text/css"

 

rel

=

"stylesheet"

 

href

=

"../styles/main.css"

 

/>

  

 

2.

 

<script

 

type

=

"text/javascript"

 

src

=

"../scripts/dtree.js"

></script>

  

 

   

这样在页面使用

http://localhost:8080/MyProject/test.jsp

访问

test.jsp

时就可以

引用到

dtree.js

和

main.css

。

 

 

 

2.

使用相对于

Web

工程的相对路径

 

对于

1

中的相对使用相对于于

jsp

页面的相对路径的这种方式，

如果我们是设置

action

跳转到

test.jsp

页面，那么这种使用相对路径的方式就引用不到了。

 

例如我们当访问

http://localhost:8080/MyProject/main.do

的时候，页面跳转到

test.jsp

页面，如果使用方法

1

，就引用不到了。

 

这个时候我们可以使用相对于

Web

工程的相对路径来引用：

 

Html

代码

  

 

1.

 

<link

 

type

=

"text/css"

 

rel

=

"stylesheet"

 

href

=

"styles/main.css"

 

/>

  

 

2.

 

<script

 

type

=

"text/javascript"

 

src

=

"scripts/dtree.js"

></script>

  

   

但是请注意：使用方法

2

这种方式引用，如果直接访问

http://localhost:8080/MyProject/test.jsp

，是引用不到的。

 

 

 

3.

使用

Web

工程的绝对路径

 

方法

1

和方法

2

都有缺点，都只适用一种情况，有没有两种情况都适用的呢？

答案肯定的！

 

我们使用绝对路径

:

 

Html

代码

  

 

1.

 

<link

 

type

=

"text/css"

 

rel

=

"stylesheet"

 

href

=

"/MyProject/styles/main.cs

s"

 

/>

  

 

2.

 

<script

 

type

=

"text/javascript"

 

src

=

"/MyProject/scripts/dtree.js"

></scr

ipt>

  

 

  

这样，不管是通过

http://localhost:8080/MyProject/main.do

跳转访问

test.jsp

还

是直接访问

http://localhost:8080/MyProject/test.jsp

，都可以成功引用。

 

  

注意：如果我们在部署

Web

应用时，没有设置

Context Root

（一般情况下配置

为工程名）

，

也就是

IP

和端口后面不带应用名，

如

http://localhost:8080/main.do

和

http://localhost:8080/test.jsp

，这种情况在引用时就不能带工程名了，应该这

样：

 

Html

代码

  

 

1.

 

<link

 

type

=

"text/css"

 

rel

=

"stylesheet"

 

href

=

"/styles/main.css"

 

/>

  

 

2.

 

<script

 

type

=

"text/javascript"

 

src

=

"/scripts/dtree.js"

></script>

jsp

或

html

页面引用外部

.css

或

.js

文件时，注意路劲问题，如果设置不当，会

引用不到这些外部的文件

 

假设使用下面的目录结构：

 

-webapp  

|-MyProject  

目录

  

 |--WebContent

目录

 

  

|---scripts 

目录

 

   

---dtree.js 

文件

 

  

|---styles 

目录

 

   

---main.css 

文件

  

  

|---pages 

目录

 

   

---test.jsp

文件

 

  

现在例如要在

test.jsp

中引用

scripts

目录下的

dtree.js

和

styles

目录下的

main.css

 

  

有如下几种方法：

 

  

  

  

1.

使用相对于

jsp

页面的相对路径

 

Html

代码

  

 

1.

 

<link

 

type

=

"text/css"

 

rel

=

"stylesheet"

 

href

=

"../styles/main.css"

 

/>

  

 

2.

 

<script

 

type

=

"text/javascript"

 

src

=

"../scripts/dtree.js"

></script>

  

 

   

这样在页面使用

http://localhost:8080/MyProject/test.jsp

访问

test.jsp

时就可以

引用到

dtree.js

和

main.css

。

 

 

 

2.

使用相对于

Web

工程的相对路径

 

对于

1

中的相对使用相对于于

jsp

页面的相对路径的这种方式，

如果我们是设置

action

跳转到

test.jsp

页面，那么这种使用相对路径的方式就引用不到了。

 

例如我们当访问

http://localhost:8080/MyProject/main.do

的时候，页面跳转到

test.jsp

页面，如果使用方法

1

，就引用不到了。

 

这个时候我们可以使用相对于

Web

工程的相对路径来引用：

 

Html

代码

  

 

1.

 

<link

 

type

=

"text/css"

 

rel

=

"stylesheet"

 

href

=

"styles/main.css"

 

/>

  

 

2.

 

<script

 

type

=

"text/javascript"

 

src

=

"scripts/dtree.js"

></script>

  

 

  

但是请注意：使用方法

2

这种方式引用，如果直接访问

http://localhost:8080/MyProject/test.jsp

，是引用不到的。

 

 

 

3.

使用

Web

工程的绝对路径

 

方法

1

和方法

2

都有缺点，都只适用一种情况，有没有两种情况都适用的呢？

答案肯定的！

 

我们使用绝对路径

:

 

Html

代码

  

 

1.

 

<link

 

type

=

"text/css"

 

rel

=

"stylesheet"

 

href

=

"/MyProject/styles/main.cs

s"

 

/>

  

 

2.

 

<script

 

type

=

"text/javascript"

 

src

=

"/MyProject/scripts/dtree.js"

></scr

ipt>

  

 

  

这样，不管是通过

http://localhost:8080/MyProject/main.do

跳转访问

test.jsp

还

是直接访问

http://localhost:8080/MyProject/test.jsp

，都可以成功引用。

 

  

注意：如果我们在部署

Web

应用时，没有设置

Context Root

（一般情况下配置

为工程名）

，

也就是

IP

和端口后面不带应用名，

如

http://localhost:8080/main.do

和

http://localhost:8080/test.jsp

，这种情况在引用时就不能带工程名了，应该这

样：

 

Html

代码

  

 

1.

 

<link

 

type

=

"text/css"

 

rel

=

"stylesheet"

 

href

=

"/styles/main.css"

 

/>

  

 

2.

 

<script

 

type

=

"text/javascript"

 

src

=

"/scripts/dtree.js"

></script>