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


Posted in Javascript onJuly 09, 2013

关于使用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与函数式编程解释
Apr 27 Javascript
JavaScript面向对象之静态与非静态类
Feb 03 Javascript
javascript tips提示框组件实现代码
Nov 19 Javascript
Jquery写一个鼠标拖动效果实现原理与代码
Dec 24 Javascript
js实现下拉框选择要显示图片的方法
Feb 16 Javascript
js剪切板应用clipboardData实例解析
May 29 Javascript
js中new一个对象的过程
Feb 20 Javascript
bootstrap weebox 支持ajax的模态弹出框
Feb 23 Javascript
jQuery Ajax前后端使用JSON进行交互示例
Mar 17 Javascript
jquery ztree实现右键收藏功能
Nov 20 jQuery
js实现购物车功能
Jun 12 Javascript
对Vue table 动态表格td可编辑的方法详解
Aug 28 Javascript
等待指定时间后自动跳转或关闭当前页面的js代码
Jul 09 #Javascript
浅析js封装和作用域
Jul 09 #Javascript
js正则表达式的使用详解
Jul 09 #Javascript
解析Jquery的LigerUI如何实现文件上传
Jul 09 #Javascript
Js(JavaScript)中,弹出是或否的选择框示例(confirm用法的实例分析)
Jul 09 #Javascript
探讨在JQuery和Js中,如何让ajax执行完后再继续往下执行
Jul 09 #Javascript
Jquery中LigerUi的弹出编辑框(实现方法)
Jul 09 #Javascript
You might like
GD输出汉字的函数的分析
2006/10/09 PHP
php提示undefined index的几种解决方法
2012/05/21 PHP
ThinkPHP的L方法使用简介
2014/06/18 PHP
jquery控制listbox中项的移动并排序
2009/11/12 Javascript
一些javascript一些题目的解析
2010/12/25 Javascript
浅析showModalDialog数据缓存问题(用禁止浏览器缓存解决)
2013/07/09 Javascript
jquery $.each() 使用小探
2013/08/23 Javascript
解决jquery中美元符号命名冲突问题
2014/01/08 Javascript
javascript中实现兼容JAVA的hashCode算法代码分享
2020/08/11 Javascript
js简单工厂模式用法实例
2015/06/30 Javascript
jQuery实现折叠、展开的菜单组效果代码
2015/09/16 Javascript
JavaScript设计模式经典之工厂模式
2016/02/24 Javascript
JavaScript实现鼠标点击导航栏变色特效
2017/02/08 Javascript
解决在Bootstrap模糊框中使用WebUploader的问题
2018/03/22 Javascript
vue.js 图片上传并预览及图片更换功能的实现代码
2018/08/27 Javascript
Layui table field初始化加载时进行隐藏的方法
2019/09/19 Javascript
javascript实现点击产生随机图形
2021/01/25 Javascript
原生js实现无缝轮播图效果
2021/01/28 Javascript
[56:21]LGD vs IG 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
pycharm远程调试openstack的图文教程
2017/11/21 Python
Pandas统计重复的列里面的值方法
2019/01/30 Python
python图的深度优先和广度优先算法实例分析
2019/10/26 Python
Python+Django+MySQL实现基于Web版的增删改查的示例代码
2020/05/13 Python
python正则表达式的懒惰匹配和贪婪匹配说明
2020/07/13 Python
喜诗官方在线巧克力店:See’s Candies
2017/01/01 全球购物
Juicy Couture Beauty官方网站:香水和化妆品
2019/03/12 全球购物
物流毕业生个人的自我评价
2014/02/13 职场文书
2014新年元旦活动策划方案
2014/02/18 职场文书
小学二年级评语
2014/04/21 职场文书
2014年设备管理工作总结
2014/11/26 职场文书
授权委托书
2015/01/28 职场文书
我的中国梦心得体会范文
2016/01/05 职场文书
Python绘制地图神器folium的新人入门指南
2021/05/23 Python
Python中的pprint模块
2021/11/27 Python
十大最强格斗系宝可梦,超梦X仅排第十,第二最重格斗礼仪
2022/03/18 日漫
利用uni-app生成微信小程序的踩坑记录
2022/04/05 Javascript