如何動態導入JavaScript和CSS文件

Question

我想根據某些條件導入給定的CSS或JavaScript文件，在我的Servlet中，我有：


protected void doPost(...)
{
   if(condition)
   {
     //import some javascript or css file here
   }

}

我需要這種行為，因為我要導入的文件太多，文件名可能會根據情況而有所不同。 可能嗎？

Answer 1

是的，是的。

boolean condition = evaluateItSomehow();
request.setAttribute("condition", condition);
request.getRequestDispatcher("/WEB-INF/page.jsp").forward(request, response);

然后在page.jsp使用JSTL c:if ：

<head>
    <c:if test="${condition}">
        <link rel="stylesheet" type="text/css" href="style.css">
        <script type="text/javascript" src="script.js"></script>
    </c:if>
    ...
</head>

更新：由於您似乎有多個文件，您甚至可以通過設置所需的文件名后綴（或前綴，甚至是您喜歡的全名）來使其更加靈活：

String suffix = evaluateItSomehow();
request.setAttribute("suffix", suffix);
request.getRequestDispatcher("/WEB-INF/page.jsp").forward(request, response);

和

<head>
    <link rel="stylesheet" type="text/css" href="style_${suffix}.css">
    <script type="text/javascript" src="script_${suffix}.js"></script>
    ...
</head>

如果將suffix設置為"foo" ，則將加載style_foo.css和script_foo.js 。 我認為這提供了足夠的新見解。

Answer 2

您是否要在dom中插入Javascript和CSS？ 我會從客戶端執行此操作。 我的意思是，可以通過顯式寫出<script...>或<link...>的代碼來實現。 更好的方法是將某些內容發送回客戶端，告訴客戶端添加樣式表或Javascript。

然后，您可以像這樣動態添加它：

如果不需要動態執行此操作，則它甚至更容易。 只需設置一個標志，然后在您的JSP或ASP中檢查標志的狀態。 在條件標記內，您將添加CSS和Javascript的代碼。 但是，從您的問題中我假設是前者。

Answer 3

function loadjscssfile(filename, filetype) {
            if (filetype == "js") { //if filename is a external JavaScript file
               // alert('called');
                var fileref = document.createElement('script')
                fileref.setAttribute("type", "text/javascript")
                fileref.setAttribute("src", filename)
                alert('called');
            }
            else if (filetype == "css") { //if filename is an external CSS file
                var fileref = document.createElement("link")
                fileref.setAttribute("rel", "stylesheet")
                fileref.setAttribute("type", "text/css")
                fileref.setAttribute("href", filename)
            }
            if (typeof fileref != "undefined")
                document.getElementsByTagName("head")[0].appendChild(fileref)
        }

調用此javascript函數可動態加載css和js文件。 在'filename'參數中傳遞帶有名稱的完整文件路徑。

如何動態導入JavaScript和CSS文件

問題描述

3 個解決方案

解決方案1
4 已采納 2010-03-20 18:06:55

解決方案2
1 2010-03-20 18:06:53

解決方案3
0 2012-05-10 11:21:11

如何動態導入JavaScript和CSS文件

問題描述

3 個解決方案

解決方案1 4 已采納 2010-03-20 18:06:55

解決方案2 1 2010-03-20 18:06:53

解決方案3 0 2012-05-10 11:21:11

解決方案1
4 已采納 2010-03-20 18:06:55

解決方案2
1 2010-03-20 18:06:53

解決方案3
0 2012-05-10 11:21:11