关于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 相关文章推荐
Input 特殊事件onpopertychange和oninput
Jun 17 Javascript
javascript 从if else 到 switch case 再到抽象
Jul 17 Javascript
javascript date格式化示例
Sep 25 Javascript
jQuery制作简洁的图片轮播效果
Apr 03 Javascript
2016年最热门的15 款代码语法高亮工具,美化你的代码
Jan 06 Javascript
使用jQuery判断浏览器滚动条位置的方法
May 30 Javascript
纯JS实现可拖拽表单的简单实例
Sep 02 Javascript
Angularjs CURD 详解及实例代码
Sep 14 Javascript
AngularJS全局scope与Isolate scope通信用法示例
Nov 22 Javascript
js实现登录注册框手机号和验证码校验(前端部分)
Sep 28 Javascript
通过cordova将vue项目打包为webapp的方法
Feb 02 Javascript
基于Echarts图表在div动态切换时不显示的解决方式
Jul 20 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
基于OpenCV的PHP图像人脸识别技术
2009/10/11 PHP
php目录操作函数之获取目录与文件的类型
2010/12/29 PHP
php数组函数序列之in_array() 查找数组值是否存在
2011/10/29 PHP
PHP中将字符串转化为整数(int) intval() printf() 性能测试
2020/03/20 PHP
php实现的获取网站备案信息查询代码(360)
2013/09/23 PHP
PHP使用MPDF类生成PDF的方法
2015/12/08 PHP
php.ini中date.timezone设置详解
2016/11/20 PHP
php自定义函数实现统计中文字符串长度的方法小结
2017/04/15 PHP
tp5.1 框架路由操作-URL生成实例分析
2020/05/26 PHP
json跟xml的对比分析
2008/06/10 Javascript
jQuery中append()方法用法实例
2014/12/25 Javascript
javascript中Array()数组函数详解
2015/08/23 Javascript
js实现选项卡内容切换以及折叠和展开效果【推荐】
2017/01/08 Javascript
nodejs 生成和导出 word的实例代码
2018/07/31 NodeJs
Layui表格监听行单双击事件讲解
2019/11/14 Javascript
package.json中homepage属性的作用详解
2020/03/11 Javascript
Node快速切换版本、版本回退(降级)、版本更新(升级)
2021/01/07 Javascript
[36:02]DOTA2上海特级锦标赛D组小组赛#2 Liquid VS VP第一局
2016/02/28 DOTA
[01:04:05]VG vs Newbee 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/20 DOTA
使用Python脚本生成随机IP的简单方法
2015/07/30 Python
Python基于list的append和pop方法实现堆栈与队列功能示例
2017/07/24 Python
python使用sklearn实现决策树的方法示例
2019/09/12 Python
通过字符串导入 Python 模块的方法详解
2019/10/27 Python
Django bulk_create()、update()与数据库事务的效率对比分析
2020/05/15 Python
Python 创建守护进程的示例
2020/09/29 Python
Python json解析库jsonpath原理及使用示例
2020/11/25 Python
详解CSS3浏览器兼容
2016/12/14 HTML / CSS
吃透移动端 Html5 响应式布局
2019/12/16 HTML / CSS
Omio俄罗斯:一次搜索公共汽车、火车和飞机的机票
2018/11/17 全球购物
巴西24小时在线药房:Droga Raia
2020/05/12 全球购物
linux面试题参考答案(7)
2012/10/29 面试题
护理专业自荐信
2013/12/03 职场文书
2014年扶贫帮困工作总结
2014/12/09 职场文书
社区党支部公开承诺书
2015/04/29 职场文书
vue实现书本翻页动画效果实例详解
2022/04/08 Vue.js
MySQL数据库如何查看表占用空间大小
2022/06/10 MySQL