关于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 相关文章推荐
javascript面向对象之Javascript 继承
May 04 Javascript
JS禁用浏览器退格键实现思路及代码
Oct 29 Javascript
使用jquery.qrcode生成彩色二维码实例
Aug 08 Javascript
javascript实现状态栏中文字动态显示的方法
Oct 20 Javascript
Hammer.js+轮播原理实现简洁的滑屏功能
Feb 02 Javascript
整理一下常见的IE错误
Nov 18 Javascript
jQuery无刷新上传之uploadify简单代码
Jan 17 Javascript
javascript事件的传播基础实例讲解(35)
Feb 14 Javascript
JS实现定时任务每隔N秒请求后台setInterval定时和ajax请求问题
Oct 15 Javascript
three.js实现炫酷的全景3D重力感应
Dec 30 Javascript
详解ES6中的Map与Set集合
Mar 22 Javascript
JS使用H5实现图片预览功能
Sep 30 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入门教程之使用Mysqli操作数据库的方法(连接,查询,事务回滚等)
2016/09/11 PHP
php mysql 封装类实例代码
2016/09/18 PHP
PHP调用接口用post方法传送json数据的实例
2018/05/31 PHP
JQuery获取浏览器窗口内容部分高度的代码
2012/02/24 Javascript
Jquery遍历节点的方法小集
2014/01/22 Javascript
JS实现一个列表中包含上移下移删除等功能
2014/09/24 Javascript
JavaScript浏览器对象之一Window对象详解
2016/06/03 Javascript
JS之相等操作符详解
2016/09/13 Javascript
Angularjs根据json文件动态生成路由状态的实现方法
2017/04/17 Javascript
微信小程序上滑加载下拉刷新(onscrollLower)分批加载数据(二)
2017/05/11 Javascript
vue项目中使用ueditor的实例讲解
2018/03/05 Javascript
js 计算月/周的第一天和最后一天代码
2020/02/01 Javascript
Nodejs在局域网配置https访问的实现方法
2020/10/17 NodeJs
Python中类的继承代码实例
2014/10/28 Python
10个易被忽视但应掌握的Python基本用法
2015/04/01 Python
Python正则表达式教程之二:捕获篇
2017/03/02 Python
轻松实现TensorFlow微信跳一跳的AI
2018/01/05 Python
详解如何利用Cython为Python代码加速
2018/01/27 Python
Python实现快速计算词频功能示例
2018/06/25 Python
把JSON数据格式转换为Python的类对象方法详解(两种方法)
2019/06/04 Python
docker django无法访问redis容器的解决方法
2019/08/21 Python
解决Python对齐文本字符串问题
2019/08/28 Python
python进程池实现的多进程文件夹copy器完整示例
2019/11/27 Python
Jupyter notebook 启动闪退问题的解决
2020/04/13 Python
Python3爬虫中Selenium的用法详解
2020/07/10 Python
小天鹅官方商城:LittleSwan
2017/06/16 全球购物
印度尼西亚最大的电商平台:Tokopedia(印尼版淘宝)
2017/12/02 全球购物
阿姆斯特丹杜莎夫人蜡像馆官方网站:Madame Tussauds Amsterdam
2019/03/12 全球购物
乐高西班牙官方商店:LEGO Shop ES
2019/12/01 全球购物
Jacques Lemans德国:奥地利钟表品牌
2019/12/26 全球购物
结构工程研究生求职信
2013/10/13 职场文书
巧克力蛋糕店创业计划书
2014/01/14 职场文书
大学校园活动策划书
2014/02/04 职场文书
MySQL 主从复制数据不一致的解决方法
2022/03/18 MySQL
零基础学java之带返回值的方法的定义和调用
2022/04/10 Java/Android
Vue操作Storage本地化存储
2022/04/29 Vue.js