关于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(一)工厂方式 js面象对象的定义方法
Dec 15 Javascript
Js 随机数产生6位数字
May 13 Javascript
Fastest way to build an HTML string(拼装html字符串的最快方法)
Aug 20 Javascript
JavaScript实现QueryString获取GET参数的方法
Jul 02 Javascript
JQuery.get提交页面不跳转的解决方法
Jan 13 Javascript
浅谈jQuery中的checkbox问题
Aug 10 Javascript
AngularJs Modules详解及示例代码
Sep 01 Javascript
浅谈原生JS实现jQuery的animate()动画示例
Mar 08 Javascript
JavaScript实现前端实时搜索功能
Mar 26 Javascript
手把手教你vue-cli单页到多页应用的方法
May 31 Javascript
vue 使用微信jssdk,调用微信相册上传图片功能
Nov 13 Javascript
微信小程序向Java后台传输参数的方法实现
Dec 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三元运算符的结合性介绍
2012/01/10 PHP
Thinkphp3.2实用篇之计算型验证码示例
2017/02/09 PHP
laravel5.1 ajax post 传值_token示例
2019/10/24 PHP
JavaScript中的一些定位属性[图解]
2010/07/14 Javascript
jQuery中使用Ajax获取JSON格式数据示例代码
2013/11/26 Javascript
js实现选项卡内容切换以及折叠和展开效果【推荐】
2017/01/08 Javascript
jqueryUI tab标签页代码分享
2017/10/09 jQuery
Vue导出json数据到Excel电子表格的示例
2017/12/04 Javascript
vue源码学习之Object.defineProperty对象属性监听
2018/05/30 Javascript
浅谈微信小程序flex布局基础
2018/09/10 Javascript
微信小程序功能之全屏滚动效果的实现代码
2018/11/22 Javascript
nodejs检测因特网是否断开的解决方案
2019/04/17 NodeJs
JavaScript 面向对象程序设计详解【类的创建、实例对象、构造函数、原型等】
2020/05/12 Javascript
JS可断点续传文件上传实现代码解析
2020/07/30 Javascript
[00:55]深扒TI7聊天轮盘语音出处3
2017/05/11 DOTA
用Python的pandas框架操作Excel文件中的数据教程
2015/03/31 Python
python 高效去重复 支持GB级别大文件的示例代码
2018/11/08 Python
python3使用QQ邮箱发送邮件
2020/05/20 Python
Python字典的概念及常见应用实例详解
2019/10/30 Python
python构建指数平滑预测模型示例
2019/11/21 Python
python利用JMeter测试Tornado的多线程
2020/01/12 Python
Python基于class()实现面向对象原理详解
2020/03/26 Python
python实现将range()函数生成的数字存储在一个列表中
2020/04/02 Python
简单的Python人脸识别系统
2020/07/14 Python
详解python polyscope库的安装和例程
2020/11/13 Python
基于html5 canvas做批改作业的小插件
2020/05/20 HTML / CSS
结婚典礼证婚词
2014/01/08 职场文书
百度吧主申请感言
2014/01/12 职场文书
喝酒检查书范文
2014/02/23 职场文书
人事专员的岗位职责
2014/03/01 职场文书
应届毕业生求职信范文
2014/05/08 职场文书
九一八事变演讲稿
2014/09/05 职场文书
2014年医生工作总结
2014/11/21 职场文书
开国大典观后感
2015/06/04 职场文书
2015年“我们的节日·重阳节”活动总结
2015/07/29 职场文书
2015年小学体育教师工作总结
2015/10/23 职场文书