关于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面向对象之静态与非静态类
Feb 03 Javascript
JavaScript操纵窗口的方法小结
Jun 28 Javascript
js opener的使用详解
Jan 11 Javascript
jQuery选择器简明总结(含用法实例,一目了然)
Apr 25 Javascript
5个可以帮你理解JavaScript核心闭包和作用域的小例子
Oct 08 Javascript
Node.js环境下编写爬虫爬取维基百科内容的实例分享
Jun 12 Javascript
jquery根据一个值来选中select下的option实例代码
Aug 29 Javascript
vue-cli + sass 的正确打开方式图文详解
Oct 27 Javascript
使用webpack/gulp构建TypeScript项目的方法示例
Dec 18 Javascript
JS正则表达式验证密码强度
Mar 18 Javascript
vue总线机制(bus)知识点详解
May 10 Javascript
JavaScript TAB栏切换效果的示例
Nov 05 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函数serialize()与unserialize()用法实例
2014/11/06 PHP
PHP里的单例类写法实例
2015/06/25 PHP
PHP实现简单ajax Loading加载功能示例
2016/12/28 PHP
PHP实现 APP端微信支付功能
2018/06/22 PHP
Yii框架应用组件用法实例分析
2020/05/15 PHP
Js 订制自己的AlertBox(信息提示框)
2009/01/09 Javascript
Javascript 获取滚动条位置等信息的函数
2009/09/08 Javascript
使用JavaScript动态设置样式实现代码及演示动画
2013/01/25 Javascript
$.getJSON在IE下失效的原因分析及解决方法
2013/06/16 Javascript
Javascript中封装window.open解决不兼容问题
2014/09/28 Javascript
jQuery晃动层特效实现方法
2015/03/09 Javascript
基于jquery实现导航菜单高亮显示(两种方法)
2015/08/23 Javascript
js贪吃蛇网页版游戏特效代码分享(挑战十关)
2015/08/24 Javascript
node.js学习之断言assert的使用示例
2017/09/28 Javascript
Angular2监听页面大小变化的解决方法
2017/10/09 Javascript
webpack学习教程之前端性能优化总结
2017/12/05 Javascript
详解Vue中使用Axios拦截器
2019/04/22 Javascript
angular6开发steps步骤条组件
2019/07/04 Javascript
解决layer弹出层msg的文字不显示的问题
2019/09/11 Javascript
vue实现购物车功能(商品分类)
2020/04/20 Javascript
JavaScript缓动动画函数的封装方法
2020/11/25 Javascript
打开电脑上的QQ的python代码
2013/02/10 Python
django admin 后台实现三级联动的示例代码
2018/06/22 Python
pycharm中使用anaconda部署python环境的方法步骤
2018/12/19 Python
Python 生成器,迭代,yield关键字,send()传参给yield语句操作示例
2019/10/12 Python
浅谈Python type的使用
2019/11/19 Python
使用python实现微信小程序自动签到功能
2020/04/27 Python
python如何构建mock接口服务
2021/01/28 Python
美国知名的旅游网站:OneTravel
2018/10/09 全球购物
马来西亚在线购物市场:PGMall.my
2019/10/13 全球购物
SNIDEL官网:日本VIVI杂志人气少女第一品牌
2020/03/12 全球购物
金讯Java笔试题目
2013/06/18 面试题
工商管理专业自荐信
2014/06/03 职场文书
幼儿园见习报告范文
2014/10/30 职场文书
幼儿园家长心得体会
2016/01/21 职场文书
为什么RedisCluster设计成16384个槽
2021/09/25 Redis