关于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和jquery修改a标签的href属性
Dec 16 Javascript
JQuery与Ajax调用新浪API获取短网址的代码
Feb 07 Javascript
javascript操作数组详解
Dec 17 Javascript
JQuery报错Uncaught TypeError: Illegal invocation的处理方法
Mar 13 Javascript
jquery实现简单手风琴菜单效果实例
Jun 13 Javascript
javascript实现动态导入js与css等静态资源文件的方法
Jul 25 Javascript
Vue 父子组件、组件间通信
Mar 08 Javascript
详解微信小程序Radio选中样式切换
Jul 06 Javascript
Vue.js学习笔记之常用模板语法详解
Jul 25 Javascript
详解基于Vue+Koa的pm2配置
Oct 24 Javascript
Angular 实现输入框中显示文章标签的实例代码
Nov 07 Javascript
每周一练 之 数据结构与算法(Stack)
Apr 16 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
Win7 64位系统下PHP连接Oracle数据库
2014/08/20 PHP
php实现微信扫码自动登陆与注册功能
2016/09/22 PHP
php技巧小结【推荐】
2017/01/19 PHP
jquery 插件之仿“卓越亚马逊”首页弹出菜单效果
2008/12/25 Javascript
使用jQuery内容过滤选择器选择元素实例讲解
2013/04/18 Javascript
轻松创建nodejs服务器(5):事件处理程序
2014/12/18 NodeJs
javascript的BOM汇总
2015/07/16 Javascript
分享几种比较简单实用的JavaScript tabel切换
2015/12/31 Javascript
JavaScript中双向数据绑定详解
2017/05/03 Javascript
vue.js中mint-ui框架的使用方法
2017/05/12 Javascript
原生javascript实现的全屏滚动功能示例
2017/09/19 Javascript
浅谈使用mpvue开发小程序需要注意和了解的知识点
2018/05/23 Javascript
Nodejs监听日志文件的变化的过程解析
2019/08/04 NodeJs
vue如何在项目中调用腾讯云的滑动验证码
2020/07/15 Javascript
JS实现audio音频剪裁剪切复制播放与上传(步骤详解)
2020/07/28 Javascript
[02:57]2014DOTA2国际邀请赛-观众采访
2014/07/19 DOTA
python益智游戏计算汉诺塔问题示例
2014/03/05 Python
在Python中使用mechanize模块模拟浏览器功能
2015/05/05 Python
Python实现在matplotlib中两个坐标轴之间画一条直线光标的方法
2015/05/20 Python
python基础教程之五种数据类型详解
2017/01/12 Python
Python3.5面向对象与继承图文实例详解
2019/04/24 Python
提升python处理速度原理及方法实例
2019/12/25 Python
Python通过2种方法输出带颜色字体
2020/03/02 Python
Python如何生成xml文件
2020/06/04 Python
关于python tushare Tkinter构建的简单股票可视化查询系统(Beta v0.13)
2020/10/19 Python
python 制作网站小说下载器
2021/02/20 Python
基本款天堂:Everlane
2017/05/13 全球购物
英国最受信任的在线眼镜商之一:Fashion Eyewear
2019/10/31 全球购物
公益活动策划方案
2014/01/09 职场文书
五年级数学教学反思
2014/02/11 职场文书
个人职业及收入证明
2014/10/13 职场文书
个人党性分析材料
2014/12/19 职场文书
2015教师年度考核评语
2015/03/25 职场文书
董事长新年致辞
2015/07/29 职场文书
redis击穿 雪崩 穿透超详细解决方案梳理
2022/03/17 Redis
element tree树形组件回显数据问题解决
2022/08/14 Javascript