关于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 相关文章推荐
$()JS小技巧
Jul 21 Javascript
js通过更改按钮的显示样式实现按钮的滑动效果
Apr 23 Javascript
js实现图片和链接文字同步切换特效的方法
Feb 20 Javascript
jquery实现的美女拼图游戏实例
May 04 Javascript
jQuery中实现prop()函数控制多选框(全选,反选)
Aug 19 Javascript
详解JavaScript树结构
Jan 09 Javascript
Vue 报错TypeError: this.$set is not a function 的解决方法
Dec 17 Javascript
从0到1搭建element后台框架优化篇(打包优化)
May 12 Javascript
javascript读取本地文件和目录方法详解
Aug 06 Javascript
Vue实现Header渐隐渐现效果的实例代码
Nov 05 Javascript
JavaScript实现图片合成下载的示例
Nov 19 Javascript
javascript实现前端分页功能
Nov 26 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
ASP和PHP都是可以删除自身的
2007/04/09 PHP
php学习之变量的使用
2011/05/29 PHP
Laravel框架模板继承操作示例
2018/06/11 PHP
使用ucenter实现多站点同步登录的讲解
2019/03/21 PHP
javascript 避免闭包引发的问题
2009/03/17 Javascript
js计算字符串长度包含的中文是utf8格式
2013/10/15 Javascript
javascript实现Table间隔色以及选择高亮(和动态切换数据)的方法
2015/05/14 Javascript
JavaScript中的getTimezoneOffset()方法使用详解
2015/06/10 Javascript
JavaScript的Backbone.js框架入门学习指引
2016/05/07 Javascript
Javascript 正则表达式校验数字的简单实例
2016/11/02 Javascript
js实现简单的网页换肤效果
2017/01/18 Javascript
jQuery制作input提示内容(兼容IE8以上)
2017/07/05 jQuery
面包屑导航详解
2017/12/07 Javascript
JS模拟实现哈希表及应用详解
2018/05/04 Javascript
详解基于Vue-cli搭建的项目如何和后台交互
2018/06/29 Javascript
vuejs 制作背景淡入淡出切换动画的实例
2018/09/01 Javascript
vue.js+element-ui动态配置菜单的实例
2018/09/07 Javascript
vue 组件中使用 transition 和 transition-group实现过渡动画
2019/07/09 Javascript
electron实现静默打印的示例代码
2019/08/12 Javascript
Python科学计算环境推荐——Anaconda
2014/06/30 Python
Python获取服务器信息的最简单实现方法
2015/03/05 Python
Python xlrd读取excel日期类型的2种方法
2015/04/28 Python
[机器视觉]使用python自动识别验证码详解
2019/05/16 Python
Django 开发调试工具 Django-debug-toolbar使用详解
2019/07/23 Python
Python处理PDF与CDF实例
2020/02/26 Python
浅析python标准库中的glob
2020/03/13 Python
PyCharm+Pipenv虚拟环境开发和依赖管理的教程详解
2020/04/16 Python
在Keras中CNN联合LSTM进行分类实例
2020/06/29 Python
css3 border旋转时的动画应用
2016/01/22 HTML / CSS
Sneaker Studio波兰:购买运动鞋
2018/04/28 全球购物
Bed Bath & Beyond加拿大官网:购买床上用品、浴巾、厨房电器等
2019/10/04 全球购物
应用化学专业职业生涯规划书
2014/01/22 职场文书
表彰大会主持词
2014/03/26 职场文书
新课培训心得体会
2014/09/03 职场文书
2014年仓库保管员工作总结
2014/12/03 职场文书
同学聚会通知书
2015/04/20 职场文书