关于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 实现GridView异步排序、分页的代码
Feb 06 Javascript
基于jquery的二级联动菜单实现代码
Apr 25 Javascript
js实现双向链表互联网机顶盒实战应用实现
Oct 28 Javascript
jQuery实现类似滑动门切换效果的层切换
Sep 23 Javascript
JavaSript中变量的作用域闭包的深入理解
May 12 Javascript
JavaScript通过setTimeout实时显示当前时间的方法
Apr 16 Javascript
js实现纯前端的图片预览
Apr 27 Javascript
vue.js vue-router如何实现无效路由(404)的友好提示
Dec 20 Javascript
超轻量级的js时间库miment使用解析
Aug 02 Javascript
VUE组件中的 Drawer 抽屉实现代码
Aug 06 Javascript
基于JavaScript实现表格隔行换色
May 08 Javascript
原生JS实现记忆翻牌游戏
Jul 31 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 数组的一个悲剧?
2011/05/11 PHP
php操作xml入门之cdata区段
2015/01/23 PHP
Linux下从零开始安装配置Nginx服务器+PHP开发环境
2015/12/21 PHP
Laravel框架运行出错提示RuntimeException No application encryption key has been specified.解决方法
2019/04/02 PHP
通过jQuery源码学习javascript(一)
2012/12/27 Javascript
js模仿jquery的写法示例代码
2013/06/16 Javascript
jQuery之排序组件的深入解析
2013/06/19 Javascript
JQuery页面的表格数据的增加与分页的实现
2013/12/10 Javascript
JS+CSS实现美化的下拉列表框效果
2015/08/11 Javascript
JavaScript中的对象和原型(一)
2016/08/12 Javascript
d3.js中冷门却实用的内置函数总结
2017/02/04 Javascript
浅谈关于.vue文件中style的scoped属性
2017/08/19 Javascript
vue.js系列中的vue-fontawesome使用
2018/02/10 Javascript
详解Vue文档中几个易忽视部分的剖析
2018/03/24 Javascript
React Native基础入门之调试React Native应用的一小步
2018/07/02 Javascript
Javascript删除数组里的某个元素
2019/02/28 Javascript
解决layer弹出层自适应页面大小的问题
2019/09/16 Javascript
js实现html滑动图片拼图验证
2020/06/24 Javascript
js实现简易点击切换显示或隐藏
2020/11/29 Javascript
[02:49]DOTA2完美大师赛首日观众采访
2017/11/23 DOTA
在Python中操作字典之update()方法的使用
2015/05/22 Python
CentOS下使用yum安装python-pip失败的完美解决方法
2017/08/16 Python
对python中xlsx,csv以及json文件的相互转化方法详解
2018/12/25 Python
python使用suds调用webservice接口的方法
2019/01/03 Python
Opencv实现抠图背景图替换功能
2019/05/21 Python
Python属性和内建属性实例解析
2020/01/14 Python
python中tkinter窗口位置\坐标\大小等实现示例
2020/07/09 Python
amaze ui 的使用详细教程
2020/08/19 HTML / CSS
JBL澳大利亚官方商店:扬声器、耳机和音响系统
2018/05/24 全球购物
大学生作弊检讨书
2014/02/19 职场文书
英语教学随笔感言
2014/02/20 职场文书
廉洁家庭事迹材料
2014/05/15 职场文书
2014年自愿离婚协议书范本
2014/09/25 职场文书
2014年度个人工作总结
2014/11/07 职场文书
小学班主任经验交流材料
2014/12/16 职场文书
php修改word的实例方法
2021/11/17 PHP