最近在弄个软件更新Web管理系统,项目中引用了js和css等样式,但发现iframe中无法成功引入样式,稍微研究之后成功的发现的解决方法,以及spring boot项目中正确引用css和js的正确姿势,一起来了解了解把

通常引用

这里先简单说明我自己的引用Css和Js的使用情况,一般方便管理,我将通用的js和css等引用在一个ftl文件中写好,之后对应的页面ftl文件,就是使用freemarker提供的include标签进行引用即可,如下面的截图所示

上图所示中,common_js.ftl文件是公用部分的引用,而index.ftl则是系统的首页,index.ftl文件中是使用了include来将common_js.ftl文件内容导入其中

common_js中,我是这样写的引用js和css文件:

<script src="js/vue.js"></script>
<script src="js/mdui.js"></script>
<link rel="stylesheet" href="css/mdui.css">

上面的引用其实没有问题,但是如果你页面中套了个iframe,你的iframe引用的样式就会失效,如下图所示

为什么会失效呢?我们看看iframe的源码就知道了

iframe的地址为http://localhost:9092/updateService/menu,引用的css的地址则就对应为http://localhost:9092/updateService/menu/css/mdui.css,js也是类似

也就是说,如果我们代码中是这样写的:

<link rel="stylesheet" href="css/mdui.css">

其对应的页面引入js的时候,就会自动在前面加上当前页面的地址,这样肯定会导致css文件的地址发生错误,从而引用无法生效

正确的地址应该为http://localhost:9092/updateService/css/mdui.css,这点我们可以从index页面源码分析得知

既然原因明白了,那么解决方法也就有头绪了,也就是下面提及的正确引用

正确引用

我们需要把iframe中引用的css和jss文件,都要固定为localhost:9092/updateService,这里updateService是我定义的项目名

所以我们只需要固定这个地址即可,恰好freemarker提供了一个对象,我们可以通过这个对象拿到我们的项目名

<#assign rootPath=springMacroRequestContext.contextPath />

<script src="${rootPath}/js/vue.js"></script>
<script src="${rootPath}/js/mdui.js"></script>
<link rel="stylesheet" href="${rootPath}/css/mdui.css">

之后再测试,结果很OK

Spring Boot中的Freemarker模版引擎引用css和js的正确姿势的更多相关文章

  1. spring boot中使用freemarker

    在做Java web开发领域,web模板引擎主要有jsp.freemarker.velocity,其中freemarker是我们常用的一种,在spring boot中使用的freemarker的方法可 ...

  2. Spring Boot 中配置文件application.properties使用

    一.配置文档配置项的调用(application.properties可放在resources,或者resources下的config文件夹里) package com.my.study.contro ...

  3. Spring Boot使用模板freemarker【从零开始学Spring Boot(转)

    视频&交流平台: à SpringBoot网易云课堂视频 http://study.163.com/course/introduction.htm?courseId=1004329008 à  ...

  4. Spring Boot中使用thymeleaf

    Spring Boot支持FreeMarker.Groovy.Thymeleaf和Mustache四种模板解析引擎,官方推荐使用Thymeleaf. spring-boot-starter-thyme ...

  5. Spring Boot中使用Swagger2构建强大的RESTful API文档

    由于Spring Boot能够快速开发.便捷部署等特性,相信有很大一部分Spring Boot的用户会用来构建RESTful API.而我们构建RESTful API的目的通常都是由于多终端的原因,这 ...

  6. Dubbo在Spring和Spring Boot中的使用

    一.在Spring中使用Dubbo 1.Maven依赖 <dependency> <groupId>com.alibaba</groupId> <artifa ...

  7. springboot(十一):Spring boot中mongodb的使用

    mongodb是最早热门非关系数据库的之一,使用也比较普遍,一般会用做离线数据分析来使用,放到内网的居多.由于很多公司使用了云服务,服务器默认都开放了外网地址,导致前一阵子大批 MongoDB 因配置 ...

  8. 在Spring Boot中使用swagger-bootstrap-ui

    在Spring Boot中使用swagger-bootstrap-ui swagger-bootstrap-ui是基于swagger接口api实现的一套UI,因swagger原生ui是上下结构的,在浏 ...

  9. Spring Boot 中关于自定义异常处理的套路!

    在 Spring Boot 项目中 ,异常统一处理,可以使用 Spring 中 @ControllerAdvice 来统一处理,也可以自己来定义异常处理方案.Spring Boot 中,对异常的处理有 ...

  10. Spring Boot中使用断路器

    断路器本身是电路上的一种过载保护装置,当线路中有电器发生短路时,它能够及时的切断故障电路以防止严重后果发生.通过服务熔断(也可以称为断路).降级.限流(隔离).异步RPC等手段控制依赖服务的延迟与失败 ...

随机推荐

  1. tp、laravel 伪静态配置

    一.Apache下的伪静态配置 <IfModule mod_rewrite.c> Options +FollowSymlinks -Multiviews RewriteEngine On ...

  2. 2022 JuiceFS 社区用户调研结果出炉

    为了使 JuiceFS 的发展更贴合用户的真实需求,我们在三周前向社区发出了一份调研问卷.此次调研面向已经将 JuiceFS 应用于生产环境的用户,了解其在应用 JuiceFS 前和使用中的体验与评价 ...

  3. CF1841

    A 题意:给一个长度为 \(n\) 的全是 \(1\) 的数列,Alice 先操作,Bob 交替.每次操作选择至少两个(可以更多)相等的数字,删除它们,在序列中加入它们的和.直到有人不能操作为止,这个 ...

  4. CF1902

    A 只要不是全 \(1\) 即可. B 二分完成天数. C \(x\) 取差的 \(gcd\),\(a_{n+1}\) 见缝插针. D 用一个 map 记录按原始操作序列,要走到 \((x,y)\) ...

  5. P9801 [NERC2018] King Kog’s Reception

    题目传送门 前置知识 线段树 解法 第一眼感觉和 luogu P1083 [NOIP2012 提高组] 借教室 很像.本题同样采用线段树维护,\(sum_{l,r}(1 \le l \le r \le ...

  6. NC50381 道路和航线

    题目链接 题目 题目描述 FarmerJohn正在一个新的销售区域对他的牛奶销售方案进行调查.他想把牛奶送到T个城镇,编号为1到T.这些城镇之间通过R条道路(编号为1到R)和P条航线(编号为1到P)连 ...

  7. SATA学习笔记——OOB信号

    一.SATA物理层概述 说OOB之前,首先得了解一下SATA结构以及物理层的含义. SATA主要包括:应用层(Application Layer), 传输层(Transport Layer),链路层( ...

  8. Springboot实现remember-me记住我功能

    1.什么是remeber-me? remeber-me即记住我功能,是我们在登录web系统时的常见勾选项.当我们登录一个web系统时除了输入常规的用户名.密码后还可以勾选记住我选项(假设该系统提供了该 ...

  9. "explicit" 的使用

    今天在编译项目时,代码审查提示 "Single-parameter constructors should be marked explicit" 于是就在构造函数前加上 expl ...

  10. win32 - 基于hwnd获取进程名字(GetModuleFileNameEx)

    #include <Windows.h> #include <psapi.h> int main() { DWORD process_ID = 0; WCHAR process ...