最近在弄個軟件更新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
