关于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官方 jQuery1.1.3发布,速度提升800%,体积保持20K
Aug 19 Javascript
javascript URL锚点取值方法
Feb 25 Javascript
Javascript在IE和FireFox中的不同表现简析
Dec 03 Javascript
jQuery实现动画效果的实例代码
May 07 Javascript
多种方式实现JS调用后台方法进行数据交互
Aug 20 Javascript
JQuery教学之性能优化
May 14 Javascript
jQuery中data()方法用法实例
Dec 27 Javascript
Javascript基础教程之定义和调用函数
Jan 18 Javascript
Angularjs注入拦截器实现Loading效果
Dec 28 Javascript
Vue数据驱动模拟实现2
Jan 11 Javascript
详解在vue-cli中使用graphql即vue-apollo的用法
Sep 08 Javascript
JS插件amCharts实现绘制柱形图默认显示数值功能示例
Nov 26 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基础知识:类与对象(4) 范围解析操作符(::)
2006/12/13 PHP
深入PHP变量存储的详解
2013/06/13 PHP
php文件上传类完整实例
2016/05/14 PHP
基于Web标准的UI组件 — 树状菜单(2)
2006/09/18 Javascript
Jquery下的26个实用小技巧(jQuery tips, tricks &amp; solutions)
2010/03/01 Javascript
jQuery $.data()方法使用注意细节
2012/12/31 Javascript
js正则表达exec与match的区别说明
2014/01/29 Javascript
jQuery获取(选中)单选,复选框,下拉框中的值
2014/02/21 Javascript
jQuery使用$.ajax进行异步刷新的方法(附demo下载)
2015/12/04 Javascript
jQuery代码实现表格中点击相应行变色功能
2016/05/09 Javascript
项目实践一图片上传之form表单还是base64前端图片压缩(前端图片压缩)
2016/07/28 Javascript
使用vue-aplayer插件时出现的问题的解决
2018/03/02 Javascript
vue自定义switch开关组件,实现样式可自行更改
2019/11/01 Javascript
js实现复制粘贴的两种方法
2020/12/04 Javascript
[52:40]完美世界DOTA2联赛PWL S2 Magma vs GXR 第一场 11.29
2020/12/02 DOTA
windows系统下Python环境的搭建(Aptana Studio)
2017/03/06 Python
Python爬取数据并写入MySQL数据库的实例
2018/06/21 Python
Python 读取串口数据,动态绘图的示例
2019/07/02 Python
Python爬取豆瓣视频信息代码实例
2019/11/16 Python
tensorflow实现测试时读取任意指定的check point的网络参数
2020/01/21 Python
Python 爬虫性能相关总结
2020/08/03 Python
Python虚拟环境的创建和使用详解
2020/09/07 Python
Python实现王者荣耀自动刷金币的完整步骤
2021/01/22 Python
通过CSS3的object-fit来调整图片适配尺寸的技巧简介
2016/02/27 HTML / CSS
20佳惊艳的HTML5应用程序示例分享
2011/05/03 HTML / CSS
HTML5梦幻之旅——炫丽的流星雨效果实现过程
2013/08/06 HTML / CSS
L’AGENCE官网:加州女装品牌
2018/06/03 全球购物
OLEDBConnection和SQLConnection有什么区别
2013/05/31 面试题
经典婚礼主持词
2014/03/13 职场文书
外语系毕业生求职自荐信
2014/04/12 职场文书
党的群众路线教育实践活动对照检查材料范文
2014/09/24 职场文书
红色电影观后感
2015/06/18 职场文书
养成教育主题班会
2015/08/13 职场文书
党组织结对共建协议书
2016/03/23 职场文书
2016年企业安全生产月活动总结
2016/04/06 职场文书
JS前端可扩展的低代码UI框架Sunmao使用详解
2022/07/23 Javascript