关于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 相关文章推荐
在一个form用一个SUBMIT(或button)分别提交到两个处理表单页面的代码
Feb 15 Javascript
javascript淡入淡出效果的实现思路
Mar 31 Javascript
js+css 实现遮罩居中弹出层(随浏览器窗口滚动条滚动)
Dec 11 Javascript
FF IE浏览器修改标签透明度的方法
Jan 27 Javascript
Javascript封装DOMContentLoaded事件实例
Jun 12 Javascript
基于javascript代码检测访问网页的浏览器呈现引擎、平台、Windows操作系统、移动设备和游戏系统
Dec 03 Javascript
angularjs表格ng-table使用备忘录
Mar 09 Javascript
JS简单实现DIV相对于浏览器固定位置不变的方法
Jun 17 Javascript
jQuery的 $.ajax防止重复提交的两种方法(推荐)
Oct 14 Javascript
Node.js连接mongodb实例代码
Jun 06 Javascript
vue中v-for加载本地静态图片方法
Mar 03 Javascript
Vue全局分页组件的实现代码
Aug 10 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 生成的XML以FLASH获取为乱码终极解决
2009/08/07 PHP
postman的安装与使用方法(模拟Get和Post请求)
2018/08/06 PHP
Laravel框架FormRequest中重写错误处理的方法
2019/02/18 PHP
使弱类型的语言JavaScript变强势
2009/06/22 Javascript
js取得url地址参数实例
2013/02/22 Javascript
Javascript中的arguments与重载介绍
2015/03/15 Javascript
非常实用的js验证框架实现源码 附原理方法
2016/06/08 Javascript
需要牢记的JavaScript基础知识
2016/09/25 Javascript
angular.js + require.js构建模块化单页面应用的方法步骤
2017/07/19 Javascript
javascript简写常用的12个技巧(可以大大减少你的js代码量)
2020/03/28 Javascript
node.js环境搭建图文详解
2018/09/19 Javascript
react中使用css的7中方式(最全总结)
2019/02/11 Javascript
vue-resource post数据时碰到Django csrf问题的解决
2020/03/13 Javascript
Vue CLI4 Vue.config.js标准配置(最全注释)
2020/06/05 Javascript
vue中使用router全局守卫实现页面拦截的示例
2020/10/23 Javascript
[03:02]2020完美世界城市挑战赛(秋季赛)总决赛回顾
2021/03/11 DOTA
python基础教程之字典操作详解
2014/03/25 Python
Python ORM框架SQLAlchemy学习笔记之关系映射实例
2014/06/10 Python
python中self原理实例分析
2015/04/30 Python
Python list操作用法总结
2015/11/10 Python
在Python的Flask中使用WTForms表单框架的基础教程
2016/06/07 Python
django配置连接数据库及原生sql语句的使用方法
2019/03/03 Python
详解Python匿名函数(lambda函数)
2019/04/19 Python
在django项目中导出数据到excel文件并实现下载的功能
2020/03/13 Python
python爬虫中的url下载器用法详解
2020/11/30 Python
使用css3实现的windows8开机加载动画
2014/12/09 HTML / CSS
CSS3制作hover下划线动画
2017/03/27 HTML / CSS
纯css实现照片墙3D效果的示例代码
2017/11/13 HTML / CSS
俄罗斯卫浴采暖及维修用品超级市场:Dkrussia
2020/05/12 全球购物
文明学生事迹材料
2014/01/29 职场文书
房产转让协议书
2014/04/11 职场文书
代理协议书范本
2014/04/22 职场文书
五四青年节比赛演讲稿
2015/03/18 职场文书
公司承诺书格式范文
2015/04/28 职场文书
童年读书笔记
2015/06/26 职场文书
篮球拉拉队口号
2015/12/25 职场文书