关于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 相关文章推荐
jquery+html5时钟特效代码分享(可设置闹钟并且语音提醒)
Mar 30 Javascript
在WordPress中加入Google搜索功能的简单步骤讲解
Jan 04 Javascript
Angularjs中UI Router全攻略
Jan 29 Javascript
JavaScript事件处理的方式(三种)
Apr 26 Javascript
JS中mouseover和mouseout多次触发问题如何解决
Jun 06 Javascript
浅谈JS运算符&amp;&amp;和|| 及其优先级
Aug 10 Javascript
Bootstrap modal 多弹窗之叠加关闭阴影遮罩问题的解决方法
Feb 27 Javascript
JavaScript 中 apply 、call 的详解
Mar 21 Javascript
微信小程序使用request网络请求操作实例
Dec 15 Javascript
VUE 使用中踩过的坑
Feb 08 Javascript
jsonp实现百度下拉框功能的方法分析
May 10 Javascript
谈谈JavaScript中的函数
Sep 08 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
php 数组的合并、拆分、区别取值函数集
2010/02/15 PHP
PHP中判断变量为空的几种方法小结
2013/11/12 PHP
php顺序查找和二分查找示例
2014/03/27 PHP
php简单实现快速排序的方法
2015/04/04 PHP
初识ThinkPHP控制器
2016/04/07 PHP
PHP如何实现跨域
2016/05/30 PHP
PHP 中使用explode()函数切割字符串为数组的示例
2017/05/06 PHP
PHP输出Excel PHPExcel的方法
2018/07/26 PHP
js不是基础的基础
2006/12/24 Javascript
Javascript 判断 object 的特定类转载
2007/02/01 Javascript
javascript 回到顶部效果的实现代码
2014/02/17 Javascript
jQuery中:radio选择器用法实例
2015/01/03 Javascript
jQuery内部原理和实现方式浅析
2015/02/03 Javascript
Bootstrap选项卡与Masonry插件的完美结合
2016/07/06 Javascript
js判断checkbox是否选中个数的方法(超简单)
2016/08/19 Javascript
jq实现左滑显示删除按钮,点击删除实现删除数据功能(推荐)
2016/08/23 Javascript
jQuery基于排序功能实现上移、下移的方法
2016/11/26 Javascript
JS实现点击循环切换显示内容的方法
2017/10/19 Javascript
React操作真实DOM实现动态吸底部的示例
2017/10/23 Javascript
layui表格数据重载
2019/07/27 Javascript
Vue移动端项目实现使用手机预览调试操作
2020/07/18 Javascript
Python正则表达式非贪婪、多行匹配功能示例
2017/08/08 Python
Python基于opencv的图像压缩算法实例分析
2018/05/03 Python
利用python实现简易版的贪吃蛇游戏(面向python小白)
2018/12/30 Python
python实现石头剪刀布小游戏
2021/01/20 Python
Django Docker容器化部署之Django-Docker本地部署
2019/10/09 Python
Python实现FLV视频拼接功能
2020/01/21 Python
浅谈Pycharm最有必要改的几个默认设置项
2020/02/14 Python
100%羊绒:NakedCashmere
2020/08/26 全球购物
建筑人员岗位职责
2013/12/25 职场文书
前台文员岗位职责
2013/12/28 职场文书
建设单位项目负责人任命书
2014/06/06 职场文书
退学证明范本3篇
2014/10/29 职场文书
英文慰问信范文
2015/03/24 职场文书
Mysql实现主从配置和多主多从配置
2021/06/02 MySQL
世界十大儿童漫画书排名,法国国宝漫画排第五,第二是轰动日本连环
2022/03/18 欧美动漫