关于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 相关文章推荐
分享几个超级震憾的图片特效
Jan 08 Javascript
ExtJs设置GridPanel表格文本垂直居中示例
Jul 15 Javascript
js实现类似于add(1)(2)(3)调用方式的方法
Mar 04 Javascript
如何通过js实现图片预览功能【附实例代码】
Mar 30 Javascript
js阻止浏览器默认行为的简单实例
May 15 Javascript
js的三种继承方式详解
Jan 21 Javascript
vue select组件的使用与禁用实现代码
Apr 10 Javascript
vue完成项目后,打包成静态文件的方法
Sep 03 Javascript
使用Object.defineProperty如何巧妙找到修改某个变量的准确代码位置
Nov 02 Javascript
JS实现页面鼠标点击出现图片特效
Aug 19 Javascript
记录一次websocket封装的过程
Nov 23 Javascript
JS前端使用canvas实现物体的点选示例
Aug 05 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
Linux下 php5 MySQL5 Apache2 phpMyAdmin ZendOptimizer安装与配置[图文]
2008/11/18 PHP
PHP 文本文章分页代码 按标记或长度(不涉及数据库)
2012/06/07 PHP
PHP判断是否是微信打开,浏览器打开的方法
2018/03/14 PHP
yii2.0框架多模型操作示例【添加/修改/删除】
2020/04/13 PHP
js模拟select下拉菜单控件的代码
2013/05/08 Javascript
javascript实现十六进制颜色值(HEX)和RGB格式相互转换
2014/06/20 Javascript
js实现ifram取父窗口URL地址的方法
2015/02/09 Javascript
jQuery实现的图文高亮滚动切换特效实例
2015/08/10 Javascript
[原创]Bootstrap 中下拉菜单修改成鼠标悬停直接显示
2016/04/14 Javascript
js实现鼠标拖动功能
2017/03/20 Javascript
深入学习nodejs中的async模块的使用方法
2017/07/12 NodeJs
js实现3D照片墙效果
2019/10/28 Javascript
selenium 反爬虫之跳过淘宝滑块验证功能的实现代码
2020/08/27 Javascript
jQuery实现二级导航菜单的示例
2020/09/30 jQuery
[01:47]2018年度DOTA2最具人气解说-完美盛典
2018/12/16 DOTA
在Python中使用M2Crypto模块实现AES加密的教程
2015/04/08 Python
用Pygal绘制直方图代码示例
2017/12/07 Python
使用python实现http及ftp服务进行数据传输的方法
2018/10/26 Python
python下PyGame的下载与安装过程及遇到问题
2019/08/04 Python
selenium WebDriverWait类等待机制的实现
2020/03/18 Python
python轮询机制控制led实例
2020/05/03 Python
tensorflow使用L2 regularization正则化修正overfitting过拟合方式
2020/05/22 Python
HTML5自定义属性的问题分析
2019/08/16 HTML / CSS
Beauty Expert美国/加拿大:购买奢侈美容产品
2018/12/05 全球购物
卡骆驰英国官网:Crocs英国
2019/08/22 全球购物
美国美食礼品篮网站:Gourmet Gift Baskets
2019/12/15 全球购物
解决方案设计综合面试题
2015/08/31 面试题
电子商务个人自荐信
2013/12/12 职场文书
捐款倡议书范文
2014/02/02 职场文书
《月迹》教学反思
2014/02/19 职场文书
保护野生动物倡议书
2014/05/16 职场文书
我的中国梦演讲稿初中篇
2014/08/19 职场文书
运动会开幕式致辞
2015/07/29 职场文书
班主任班级管理心得体会
2016/01/07 职场文书
sql server偶发出现死锁的解决方法
2022/04/10 SQL Server
MySql重置root密码 --skip-grant-tables
2022/04/11 MySQL