简体   繁体   English

如何动态导入JavaScript和CSS文件

[英]How to dynamically import javascript and css files

i Want to import a given css or javascript file depending os some conditions, in my Servlet i have: 我想根据某些条件导入给定的CSS或JavaScript文件,在我的Servlet中,我有:


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

}

I need this behavior since i have too many files to import and the files name may vary according to the condition. 我需要这种行为,因为我要导入的文件太多,文件名可能会根据情况而有所不同。 Is it possible? 可能吗?

Sort of, yes. 是的,是的。

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

Then in page.jsp using JSTL c:if : 然后在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>

Update: since you seem to have more than one files for this, you can even make it more flexible by just setting the desired filename suffix (or prefix, or even the entire name, what you like): 更新:由于您似乎有多个文件,您甚至可以通过设置所需的文件名后缀(或前缀,甚至是您喜欢的全名)来使其更加灵活:

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

and

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

If you set suffix to for example "foo" , this will load style_foo.css and script_foo.js . 如果将suffix设置为"foo" ,则将加载style_foo.cssscript_foo.js I think this gives enough new insights. 我认为这提供了足够的新见解。

Are you trying to insert Javascript and CSS into the dom? 您是否要在dom中插入Javascript和CSS? I would do that from the client side. 我会从客户端执行此操作。 I mean, it is possible to do it by explicitly writing out the code for <script...> or <link...> . 我的意思是, 可以通过显式写出<script...><link...>的代码来实现。 A better way to do it is to send something back to the client that tells it to add a stylesheet or Javascript. 更好的方法是将某些内容发送回客户端,告诉客户端添加样式表或Javascript。

Then you can add it dynamically like so: 然后,您可以像这样动态添加它:

If this doesn't need to be done dynamically, then it is even easier. 如果不需要动态执行此操作,则它甚至更容易。 Simply set a flag and in your JSP or ASP, check the state of the flag. 只需设置一个标志,然后在您的JSP或ASP中检查标志的状态。 Within the conditional tag, you will add the code for your CSS and Javascript. 在条件标记内,您将添加CSS和Javascript的代码。 However, I am assuming from your question that it is the former. 但是,从您的问题中我假设是前者。

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)
        }

Call this javascript function to dynamically load the css and js file. 调用此javascript函数可动态加载css和js文件。 Pass the complete file path with name in 'filename' argument. 在'filename'参数中传递带有名称的完整文件路径。

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM