关于include标签导致js路径找不到的问题分析及解决

 更新时间:2013年07月09日 17:39:33   作者:  
本文为大家详细介绍下关于使用jsp:include标签及<%@ include标签时要注意的事项以及实测发现问题并解决问题的全过程,感兴趣的各位可以参考下哈,希望对大家有所帮助
关于使用jsp:include标签及<%@ include标签时要注意的事项
先回忆一下二者的区别(对于此篇文章而言,二者在用法上没有区别)
jsp:include是先编译一下included.jsp文件,然后再包含(先编译,后包含)
@ include是先把文件包含就来,然后统一编译(先包含,后编译)
今天下午想把Jquery集成到项目中,发现怎么样都会出问题。原因就是路径问题。
在集成时,我的思路是写一个公共JSP文件,里面包含一些常用的js文件,当然此处我用的就是Jquery插件了。
但写完发现单独测试公共JSP是可以使用的,但包含公共JSP页面的页面却始终不能使用JQuery,开始还以为是加载顺序的问题。

几经测试,终于发现了其中的问题。
由于做的项目文件较多,故文件都不放在一个文件夹下:在公共JSP页面中,有
复制代码 代码如下:

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<script type="text/javascript" src="js/jquery132min.js"></script>
<script type="text/javascript">
$(function(){
alert('hello1');
});
</script>

在调用它的时候,有:
<%@ include file="../../common_ext.jsp"%>
但这样很可能导致错误。

原因是,include之后,公共JSP被加载到自己的JSP,则JQueryr的相对位置已经发生了变化。即公共JSP把JQuery的相对位置传给了自己的JSP,但自己的JSP以自身为标准,通过路径就找不到Jquery插件了。简单地说,就是如果用相对路径,则公共JSP中的路径就应该是相对自己jSP的路径了。
但这样显然失去了它是公共JSP的意义,因此在这里用绝对路径来做:
复制代码 代码如下:

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String tPath = request.getContextPath();
String tBasePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+tPath+"/";
%>
<script type="text/javascript" src="<%=tBasePath%>js/jquery132min.js"></script>
<script type="text/javascript">
$(function(){
alert('hello1');
});
</script>

这样,只要在自己的jSP页面中引入公共JSP就可以了。

相关文章

  • JavaScript对象解构的用法实例解析

    JavaScript对象解构的用法实例解析

    解构赋值允许你使用类似数组或对象字面量的语法将数组和对象的属性赋给各种变量,下面这篇文章主要给大家介绍了关于JavaScript对象解构用法的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2022-01-01
  • 基于JavaScript实现无缝滚动效果

    基于JavaScript实现无缝滚动效果

    这篇文章主要为大家详细介绍了基于JavaScript实现无缝滚动效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-07-07
  • 动态修改DOM 里面的 id 属性的弊端分析

    动态修改DOM 里面的 id 属性的弊端分析

    我不知道是否有什么标准规定不允许修改id属性,或者不建议修改id属性,总之IE对此支持不佳。
    2008-09-09
  • JavaScript装箱及拆箱boxing及unBoxing用法解析

    JavaScript装箱及拆箱boxing及unBoxing用法解析

    这篇文章主要介绍了JavaScript装箱及拆箱boxing及unBoxing用法解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2020-06-06
  • 微信小程序实现手写签名功能

    微信小程序实现手写签名功能

    微信小程序实现手写签名功能的步骤详解,包括技术选型、实现步骤、优化与拓展以及常见问题解答,感兴趣的朋友跟随小编一起看看吧
    2025-01-01
  • 通过action传过来的值在option获取进行验证的方法

    通过action传过来的值在option获取进行验证的方法

    通过action传过来的值在option获取进行验证,下面有个不错的示例,需要的朋友不要错过
    2013-11-11
  • JavaScript实现人体面部活体检测的功能

    JavaScript实现人体面部活体检测的功能

    本文详细介绍了如何在浏览器端使用JavaScript实现高可靠度的人脸活体检测,包括核心原理、可行方案、优缺点对比以及示例代码,感兴趣的朋友一起看看吧
    2025-02-02
  • ES6中Class类的静态方法实例小结

    ES6中Class类的静态方法实例小结

    这篇文章主要介绍了ES6中Class类的静态方法,结合实例形式简单总结分析了ES6中class类中静态方法的使用方法与相关注意事项,需要的朋友可以参考下
    2017-10-10
  • js 对象是否存在判断

    js 对象是否存在判断

    js 对象是否存在,然后进行下一步的操作。
    2009-07-07
  • JavaScript中的伪数组用法及说明

    JavaScript中的伪数组用法及说明

    这篇文章主要介绍了JavaScript中的伪数组用法及说明,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-02-02

最新评论