使用window.location.href进行向前向后跳转

因为对代码里面的相对路径有点晕，每次使用window.location.href进行页面跳转的时候，每次都要测试一下，看看这样子写到底跳转到哪里去了。今天又碰到了，想到每次都要试，不如这次试个全的，以后都不用试了。就琢磨了下，这里做个记录。

 

说明：

1、项目名称:TestWeb;

2、首页:index.jsp，在webRoot根目录下

3、webRoot/page目录下，有test.jsp和test2.jsp

4、webRoot/page2目录下，有test.jsp

 

当前页面所处路径：http://127.0.0.1:8080/TestWeb/index.jsp，即首页。

 

情况1：从首页跳转到其他目录下，即从index.jsp跳转到page/test.jsp页面

代码：window.location.href='page/test.jsp'。page前面没有/，若是添加/就变成http://127.0.0.1:8080/page/test.jsp，出现404错误。

 

情况2：从其他目录跳转到首页，即从page/test.jsp跳转到index.jsp页面

代码：window.location.href='../index.jsp'。..表示上一级，当前页面在page下，向上一级就是webRoot也就是index.jsp所在目录了。

（PS：原本以为这样子写地址栏会这样子：http://127.0.0.1:8080/test/page/../index.jsp,没想到还挺智能的嘛知道..表示的是上一级目录。哈哈哈，涨姿势了。）

这里有两个情况需要说明：

a、若直接使用window.location.href='index.jsp'，那么地址栏会变成http://127.0.0.1:8080/TestWeb/page/index.jsp，而index.jsp是在webRoot下而不是当前目录的page下，所以会出现404错误。

b、index.jsp前面不能有/，若是添加/就变成http://127.0.0.1:8080/index.jsp，也就是tomcat的首页了。

 

情况3：从其他目录跳转到同目录的另一个页面，即从page/test.jsp跳转到page/test2.jsp页面

这个也比较简单，因为在同一个目录下直接跳就好：window.location.href='test2.jsp'

 

情况4：从其他目录跳转到另一个目录的一个页面，即从page/test.jsp跳转到page2/test.jsp页面

根据情况2中的原理：先定位到上一级也就是webRoot下，再根据情况1的原理直接跳转，因此代码为：window.location.href='../page2/test2.jsp'

 

根据上面的四种情况总结出几个点：

1、使用window.location.href跳转到的路径一定不能加/，加了/就跳到tomcat目录而不是项目的目录了。

2、需要跳转时，先定位当前页面所在路径，然后通过..定位到webRoot下，最后定位到指定目录。或者先通过../定位到同目录下然后定位到指定目录。