关于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 相关文章推荐
下载文件个别浏览器文件名乱码解决办法
Mar 19 Javascript
js中方法重载如何实现?以及函数的参数问题
Aug 01 Javascript
jQuery基本选择器(实例及表单域value的获取方法)
May 20 Javascript
原生JS:Date对象全面解析
Sep 06 Javascript
ES6通过babel转码使用webpack使用import关键字
Dec 13 Javascript
AngularJS的脏检查深入分析
Apr 22 Javascript
老生常谈js-react组件生命周期
May 02 Javascript
jQuery实现根据身份证号获取生日、年龄、性别等信息的方法
Jan 09 jQuery
JS实现的合并两个有序链表算法示例
Feb 25 Javascript
vue与django集成打包的实现方法
Nov 11 Javascript
js实现拾色器插件(ColorPicker)
May 21 Javascript
几款主流好用的富文本编辑器(所见即所得常用编辑器)介绍
Mar 17 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引用效率问题分析
2012/03/23 PHP
PHP+shell实现多线程的方法
2015/07/01 PHP
PHP自定义错误处理的方法分析
2018/12/19 PHP
iframe 异步加载技术及性能分析
2011/07/19 Javascript
js获取网页可见区域、正文以及屏幕分辨率的高度
2014/05/15 Javascript
PHP使用方法重载实现动态创建属性的get和set方法
2014/11/17 Javascript
Nodejs实现的一个静态服务器实例
2014/12/06 NodeJs
JS实现的最简Table选项卡效果
2015/10/14 Javascript
[原创]JQuery 在表单提交之前修改 提交的值
2016/04/14 Javascript
AngularJS中transclude用法详解
2016/11/03 Javascript
Angular.js与node.js项目里用cookie校验账户登录详解
2017/02/22 Javascript
HTML5+Canvas调用手机拍照功能实现图片上传(上)
2017/04/21 Javascript
微信小程序tabbar不显示解决办法
2017/06/08 Javascript
Node.JS中快速扫描端口并发现局域网内的Web服务器地址(80)
2017/09/18 Javascript
在vue中使用Autoprefixed的方法
2018/07/27 Javascript
JavaScript定时器设置、使用与倒计时案例详解
2019/07/08 Javascript
[06:33]DOTA2亚洲邀请赛小组赛第二日 TOP10精彩集锦
2015/01/31 DOTA
python设置检查点简单实现代码
2014/07/01 Python
在Python中使用M2Crypto模块实现AES加密的教程
2015/04/08 Python
浅析Python 中整型对象存储的位置
2016/05/16 Python
python实现杨氏矩阵查找
2019/03/02 Python
python3.6中@property装饰器的使用方法示例
2019/08/17 Python
详解用Python进行时间序列预测的7种方法
2020/03/13 Python
H5混合开发app如何升级的方法
2018/01/10 HTML / CSS
canvas裁剪clip()函数的具体使用
2018/03/01 HTML / CSS
法国在线药房:1001Pharmacies
2021/03/07 全球购物
四种会话跟踪技术
2015/05/20 面试题
网站编辑求职信
2013/10/17 职场文书
现金会计岗位职责
2013/12/05 职场文书
护士岗前培训自我评鉴
2014/02/28 职场文书
中学生教师节演讲稿
2014/09/03 职场文书
个人整改措施落实情况汇报
2014/10/29 职场文书
教导处教学工作总结
2015/08/12 职场文书
六五普法先进个人主要事迹材料
2015/11/03 职场文书
二年级数学教学反思
2016/02/16 职场文书
Z-Order加速Hudi大规模数据集方案分析
2022/03/31 Servers