先回忆一下二者的区别(对于此篇文章而言,二者在用法上没有区别)

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就可以了。

js 放在公共头部 子页面引用js 失效问题的更多相关文章

  1. .Net MVC关于子页面引用js库问题

    layout页面中的配置: @RenderSection("scripts", required: false) @RenderSection("Styles" ...

  2. Js动态获取iframe子页面的高度////////////////////////zzzz

    Js动态获取iframe子页面的高度   Js动态获取iframe子页面的高度总结 问题的缘由 产品有个评论列表引用的是个iframe,高度不固定于是引发这个总结. 方法1:父级页面获取子级页面的高度 ...

  3. 【shiro】使用shiro搭建的项目,页面引用js,报错:Uncaught SyntaxError: Unexpected token <

    使用shiro搭建项目过程中,总是出现登录页面 登录第一次有效果,登陆第二次出现302状态码,第三次又有效果,第四次又没有效果的局面. 因此,采用ajax提交页面登录的用户名和密码,但是在引用js的过 ...

  4. 高德地图 JS API (jsp + miniui(子页面数据返回父页面并设值) + 单个点标记 + 点标记经纬度 + 回显 + 限制地图显示范围+搜索)

    -*-  父页面js function mapFocus(){ //console.log("-*-"); var longitude = mini.get("jd&qu ...

  5. Js动态获取iframe子页面的高度总结

    问题的缘由 产品有个评论列表引用的是个iframe,高度不固定于是引发这个总结. 方法1:父级页面获取子级页面的高度 给元素设置高度 这方法是用在父级页面里的,通过获取子级页面的高度给iframe设置 ...

  6. angular.js前端分层开发(页面和js代码分离,并将js代码分层)

    一. 抽取模块成base.js文件// 定义模块: var app = angular.module("eshop",['pagination']); 二. 抽取服务成brandS ...

  7. 典型:Eayui项目aspx页面引用js

    <link href="../Scripts/easyui1.3.5/themes/default/easyui.css" rel="stylesheet" ...

  8. JS 中根据iframe子页面自动iframe高度

    注意:为使页面有更好的兼容性,在使用以下代码前,请将aspx页中头部的<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional ...

  9. vs2010 mvc3创建的razor引擎模板页,子页面引用后出现当前上下文中不存在名称“ViewBag”

    View文件夹下缺少Web.config

随机推荐

  1. css实现文本两行或多行文本溢出显示省略号

    word-break: break-all; text-overflow: ellipsis; display: -webkit-box; /** 对象作为伸缩盒子模型显示 **/ -webkit-b ...

  2. mybatis匹配字符串的坑

    where语句中我们经常会做一些字符串的判断,当传入的字符串参数为纯数字时,在mybatis的条件语句test里匹配全数字字符串需要注意会有如下现象: 所以里面的字符串需要加单引号,mybatis是匹 ...

  3. ajax调用json

    //var data_str='({"detail":[{"html":"科技科技科技有限公司"},{"html":&q ...

  4. html页面中iframe导致JavaScript失效

    <body onload=“reset()”> <div id="part1"> some thing here .... <div> < ...

  5. as3 声明变量

    var a:int=0, b, c:Number=2; trace(a,b,c) /* 0 undefined 2 */ var a:int, b:uint, c:Number; var d:Stri ...

  6. 模板引擎-freemarker

    Freemarker 是一款模板引擎,是一种基于模版生成静态文件的通用 工具,它是为java程序员提供的一个开发包. 可通过将Word或者Excel模板另存为xml格式,在其中修改要替换的内容. 基本 ...

  7. chrome 设置是否缓存

    在进行本地开发时,因老需要修改js,css等文件,而页面又带有缓存因此无法自动更新为新的文件. 在页面点击 -> F12 ->F1 ->References -> NetWor ...

  8. Tomcat Servlet学习

    参照: 浅谈cookie跨域的解决方案——document.domain(http://blog.csdn.net/zhouziyu2011/article/details/61200943) Ser ...

  9. 前端-CSS-3-高级选择器

    高级选择器 总结: <!-- 总结: 基础选择器: 1.标签选择器 div 2.类选择器 .div1 3.id选择器 #box 4.通配符选择器 * 高级选择器: 1.群组选择器 中间用, .t ...

  10. 前端开发-2-HTML

    1.开发环境 市面上有很多的HTML编辑器可以选择,常见的Hbuild.Sublime Text.Dreamweare都可以用来开发HTML. 当然PyCharm也支持HTML开发. 2.文件后缀名规 ...