最近在弄個軟體更新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中,我是這樣寫的引用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

也就是說,如果我們程式碼中是這樣寫的:

<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