jsp 网站引入外部css或者js失效问题解决

最近做项目，完成项目经理布置的任务，开始入门java web，但在开发过程中遇到过许许多多的问题，但是令我最头痛的还是导入外部css一直失效，困扰许久才找出原因。

路径问题

css或者js导入失效最有可能的原因就是路径错误，这里我给出我的网站目录结构，大家可以参考下。

导入css代码：

<link rel="stylesheet" type="text/css" href="css/login.css">

记得jsp头部需要设置相对路径：

  <%
    String path = request.getContextPath();
    String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
  %>

设置了过滤器

我就是因为设置了一个登录过滤器才导致css和js失效。解决办法很简单,设置 filter 所拦截的请求路径(过滤器关联的URL样式)为相应的文件，例如我过滤的是jsp文件，所以我的xml部分配置如下：

  <filter-mapping>
    <filter-name>login</filter-name>
    <url-pattern>/.jsp</url-pattern>
  </filter-mapping>

感谢阅读，希望能帮助到大家，谢谢大家对本站的支持！

赞 (0)

相关推荐

  • 使用微信内嵌H5网页解决JS倒计时失效问题

    使用微信内嵌H5网页解决JS倒计时失效问题

    项目要求:将H5商城页面嵌套到公司微信公众号里 项目本身的开发跟移动端网页并无太多差异,只是这昨天遇到一个问题,说是棘手,到也简单. 用户下单后,在选择支付方式页面,有个倒计时的逻辑(从下单时开始计算,24小时后未支付,会有ws自动取消这个订单),js代码如下: <script type="text/javascript"><br> var timespan = '20160113'; //后台程序生成24小时时间差值,这里随便写写 var timer; fun

  • js 开发之autocomplete="off"在chrom中失效的解决办法

    js 开发之autocomplete="off"在chrom中失效的解决办法 问题:在表单的输入框中,有时候我们并不希望点击输入框时,会出现提示信息.这时,在输入框中添加属性:autocomplete="off",一般能达到目的.而在chrom里面就失效. 失效的原因是:浏览器会根据输入框的input的type属性为password的时候,自动将用户名和密码框填充. 解决方法:因为浏览器是否自动填充内容,根据type=password来判断的.此时先将作为密码的输入

  • JS失效 提示HTML1114: (UNICODE 字节顺序标记)的代码页 utf-8 覆盖(META 标记)的冲突的代码页 utf-8

    经过分析发现,这个是因为页面中html与js编码不一致导致的,一般情况最好统一标准的utf8的 上网找了找,木有找到相关的解决办法,索性自己试了试. 原页面是这样写的: <html> <head> <meta http-equiv="Content-Type" content="text/html charset=UTF-8" /> <script type="text/javascript" src=&

  • JS实现发送短信验证后按钮倒计时功能(防止刷新倒计时失效)

    应用场景 在开发"发送短信验证"功能时候,要解决一个问题,防止恶意或频繁发送短信验证码问题.一般原理是"当点击发送按钮时,发送ajax请求到服务器发送短信验证码,成功则把发送按钮设置为不可点击,并且调用定时器,按钮显示倒计时".如果就这样不对倒计时存储做处理,那么当刷新页面,会出现倒计时失效,按钮可点击.提供以下解决方案: 利用cookie存储倒计时 利用HTML5的localStorage 存储倒计时 利用cookie存储倒计时 发送成功后把剩余倒计时存储到coo

  • js放到head中失效的原因与解决方法

    1.今天写js碰到一个奇怪的问题,写好的js放到body里面执行,但是放到head中没有任何效果,为什么导致这种原因呢? 看失效代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/

  • JS出现失效的情况总结

    对于大前端来说,JS可谓是我们的神器,从页面的效果到数据的传递,再到后台的业务,无处不充斥着JS的身影,但是万能的JS也有贪玩的时候,某一时刻你就有可能发现你形影不离的JS突然间罢工了,这对我们前端来说绝对是头痛的事,作为前端君的我今天就和大家聊聊有哪些情况会导致JS突然性的罢工.  1.JS出现错误,比如函数没有闭合,JS的标签出现错误等等情况,都会使得JS不能执行,这时如果不能发现错误,就会陷入JS貌似挂掉了的情况,也给开发工作造成困扰.  2.还有一种情况就是你苦苦修改的页面发现并不是你运

  • 使用jQuery的load方法设计动态加载及解决被加载页面js失效问题

    使用jQuery的load方法设计动态加载及解决被加载页面js失效问题

    一.问题分析 对于后台系统,相比大家都有所印象,知道其中的布局结构,如图: 在这种布局中我们需要将header,sidebar,footer分开,而且对于中间部分的content内容需要动态变化,即根据不同菜单定位到不同页面,而整体布局不会变化 这种布局结构对于单纯的HTML不具备这种嵌入各部分内容的能力,所以就需要我们自己来寻找或者解决这种问题,由于jquery的兼容性和使用广度比较不错,这里 使用jquery的load方法来处理这种页面布局框架. 二.load方法详解 1.定义 $(sele

  • jsp 网站引入外部css或者js失效问题解决

    jsp 网站引入外部css或者js失效问题解决

    最近做项目,完成项目经理布置的任务,开始入门java web,但在开发过程中遇到过许许多多的问题,但是令我最头痛的还是导入外部css一直失效,困扰许久才找出原因. 路径问题 css或者js导入失效最有可能的原因就是路径错误,这里我给出我的网站目录结构,大家可以参考下. 导入css代码: <link rel="stylesheet" type="text/css" href="css/login.css"> 记得jsp头部需要设置相对路

  • vue.js引入外部CSS样式和外部JS文件的方法

    学习Vue.js动画时,需要引入一个animate.css,如何全局引入外部文件呢? 一.引入外部CSS样式文件 1. 在app.vue中<style>下直接引入对应的路径 使用@import引入外部css,作用域是全局的,也可在相应的单vue组件引入,import并不是引入代码到<style></style>里面,而是发起新的请求获得样式资源,并且没有加scoped. <style scoped> @import "../static/font/

  • spring boot 2.x html中引用css和js失效问题及解决方法

    在application.properties中配置了static的默认路径 我的static目录结构是这样的 index.html中这样引用css或者js文件,用到了th标签 html使用th标签需要先导入 以上这样配置好了之后发现网页的css和js果然加载出来了. 自定义拦截器失效 在自定义拦截器注册之后发现静态资源被拦截了,注释掉拦截器发现果然是拦截器的问题. 在注册方法上使用了excludePathPatterns()排除静态资源的拦截,发现该方法失效了,查看源码WebMvcConfig

  • 为什么要在引入的css或者js文件后面加参数的详细讲解

    css和js带参数(形如.css?v=与.js?v=) 复制代码 代码如下: <script type="text/javascript" src="jb51.js?version=1.2.6″></script><link rel='stylesheet' href='base.css?version=2.3.3′ type='text/css' /> 使用参数有两种可能, 第一.脚本并不存在,而是服务端动态生成的,因此带了个版本号,以示

  • jsp、css中引入外部资源相对路径问题分析

    在jsp页面中添加base,可用相对路径: 复制代码 代码如下: <%     String path = request.getContextPath();     String basePath = request.getScheme() + "://"             + request.getServerName() + ":" + request.getServerPort()             + path + "/&quo

  • 在vue中如何引入外部的css文件

    目录 vue中引入外部css文件 1. 全局引入 2. 局部引入相对路径 3. 局部引入绝对路径 css-loader导致vue中样式失效的坑 问题描述 环境 原因 方案 vue中引入外部css文件 在项目的src文件下,新建一个style文件夹,存放css文件. 1. 全局引入 将外部的css文件放到style文件下,引入外部文件只需在main.js文件中 import '@/style/reset.css' 我引入的是清除默认样式的css文件 2. 局部引入相对路径 <style scope

  • 在CODEIGNITER中 在CI中引入外部的JS与CSS呢

    但今天在用CI时,却忘记了,搞了很久都没有出来,上了CI的中国官方网,终于在他们帮助下把问题觖决了,在这里把它贴出来,供大家分享. (另注:我这里是隐藏了url中的index.php文件的,与不隐藏有所不同,但最终都是采用绝对URL) 首先,我在.htaccess文件里设置(作用是隐藏index.php),如下: RewriteEngine on RewriteCond $1 !^(index\.php|images|js|img|css|robots\.txt) #在这里写要排除的资源等 Re

  • Vue项目中引入外部文件的方法（css、js、less）

    Vue项目中引入外部文件的方法（css、js、less）

    这两天学习了Vue.js ,正好了解了如何引入外部文件的方法,而且很重要,所以,今天添加一点小笔记. 例子中css文件采用bootstrap.css,js文件采用jQuery,less文件用less.less(自定义文件) 步骤一:安装webpack cnpm install webpack -g 步骤二:在src/assets下面新建css.js.less.fonts文件夹,并放入对应文件. 将bootstrap.css放入css目录下,bootstrap.min.js放入js文件下,font

  • 在html中引入外部js文件,并调用带参函数的方法

    在html中引入外部js文件,并调用带参函数的方法

    在html中引入外部js文件,并调用js文件中的带参函数 1 项目结构 2 编写a.js.test.html //a.js function abc(str){ alert(str); } //test.html <html> <head> <script type="text/javascript" src="a.js"></script> <script type="text/javascript&

  • webpack+vue-cli项目中引入外部非模块格式js的方法

    在开发vue的项目(我使用的是vue2),需要添加js,虽然可以通过npm install 安装插件,但是如果有一些插件并没有开源,这时候我们只有脸上宽面条了.所以我更倾向于在webpack中引入外部js文件. 1.直接引用 Note:(红色标注部分) 位置1:将页面中需要用到的js,引入进来,from 后面是该js所在的文件目录: 位置2:需要用到位置一中定义的变量Swiper; 位置3:为防止eslint严格模式下报错,需要将位置2定义的swiper再次调用一下: 以上这篇webpack+v

随机推荐