Incorporating an external JavaScript or CSS file into a Java web application at runtime

Question

Incorporating an external JavaScript or CSS file into a Java web application at runtime

I am looking to dynamically add an external JavaScript or CSS file in my test.html file. Although I am aware of a trick that involves using jQuery like this:

 $(”).appendTo(‘head’).attr({
 rel: ‘stylesheet’,
 type: ‘text/css’,
 href: ‘**htttp://192.168.30.229:8080/**javascripts/jwysiwyg/jquery.wysiwyg.css’
});

My goal is to store the URL (http://192.168.30.229:8080/) of the CSS and JavaScript files in an XML file, such as web.xml. Then, I aim to retrieve the URL from the web.xml file and dynamically append it to the href attribute. This way, if the URL needs to be changed, for example, to **:http://192.168.100.229:7071/, the code in the HTML file does not need to be altered.

How can I properly write and read the URL from the XML file and utilize it in the test.html file?

java javascript jquery css

Answer 1

Answer №1

Incorporating external JavaScript or CSS into your HTML page can be achieved by utilizing JavaScript. Learn more about this by visiting:
If you are looking to dynamically generate HTML to manipulate a specific section, JSP (JavaServer Pages) can be helpful. To do this, define a <context-param> in your web.xml and then reference it in the JSP page:
```
<context-param>
  <param-name>someUrl</param-name>
  <param-value>http://192.168.1.1:8080/something</param-value>
</context-param>
```

Next, you can reference the defined param in your JSP page like so:

<%= getServletContext().getInitParamter("someUrl") %>

Answer 2

Incorporating external JavaScript or CSS into your HTML page can be achieved by utilizing JavaScript. Learn more about this by visiting:
If you are looking to dynamically generate HTML to manipulate a specific section, JSP (JavaServer Pages) can be helpful. To do this, define a <context-param> in your web.xml and then reference it in the JSP page:
```
<context-param>
  <param-name>someUrl</param-name>
  <param-value>http://192.168.1.1:8080/something</param-value>
</context-param>
```

Next, you can reference the defined param in your JSP page like so:

<%= getServletContext().getInitParamter("someUrl") %>

Answer 3

Answer №2

function deleteFile(fileName, type){
    var elementType = (type=="js")? "script" : (type=="css")? "link" : "none"; 
    var attributeType = (type=="js")? "src" : (type=="css")? "href" : "none"; 
    var allElements = document.getElementsByTagName(elementType);
    for (var i = allElements.length; i >= 0; i--){ 
        if (allElements[i] && allElements[i].getAttribute(attributeType) != null && allElements[i].getAttribute(attributeType).indexOf(fileName) != -1){
            allElements[i].parentNode.removeChild(allElements[i]); 
        }
    }
}

deleteFile("somescript.js", "js"); 
deleteFile("somestyle.css", "css");

The function creates a list of elements based on the file type specified to be deleted. It then loops through these elements backwards, checking if they match the file name to be removed. Removing elements in reverse order helps maintain the integrity of the loop when elements are deleted. To delete an element, the function uses the parentNode.removeChild() method.

Answer 4

function deleteFile(fileName, type){
    var elementType = (type=="js")? "script" : (type=="css")? "link" : "none"; 
    var attributeType = (type=="js")? "src" : (type=="css")? "href" : "none"; 
    var allElements = document.getElementsByTagName(elementType);
    for (var i = allElements.length; i >= 0; i--){ 
        if (allElements[i] && allElements[i].getAttribute(attributeType) != null && allElements[i].getAttribute(attributeType).indexOf(fileName) != -1){
            allElements[i].parentNode.removeChild(allElements[i]); 
        }
    }
}

deleteFile("somescript.js", "js"); 
deleteFile("somestyle.css", "css");

The function creates a list of elements based on the file type specified to be deleted. It then loops through these elements backwards, checking if they match the file name to be removed. Removing elements in reverse order helps maintain the integrity of the loop when elements are deleted. To delete an element, the function uses the parentNode.removeChild() method.

Incorporating an external JavaScript or CSS file into a Java web application at runtime

Answer №1

Answer №2

Similar questions

I'm wondering if anyone has any insights as to why the CSS rule `body{ overflow: auto;}` is not functioning properly for me. Despite my attempts of adding a class to the body tag and

Getting a blank request body error while receiving data from an Angular 4 application in Express

Creating space between flex items in Slick Carousel with Vue

When transitioning an iOS Swift app to the background, a NodeJS error arises: 'Headers cannot be set after they have been sent to the client'

Maintain and refresh the chosen option in the dropdown menu

Utilizing jQuery taggd to add annotations to images

The pagination feature in DataTable does not retain the edited page after making changes

Preventing Javascript array elements from being overwritten: Best practices

Setting a default value for Autocomplete in MaterialUI and React.js

Creating an anchor element with text and a bootstrap icon involves using the appropriate HTML structure and

Utilizing TypeScript Class Inheritance: The Reference to 'super' is Only Allowed in Members of Derived Classes or Object Literal Expressions

Integrate HTML code from one file into another HTML file

Wordpress is experiencing a recurring issue with scripts being loaded multiple times

Standardizing URLs with ExpressJS router

The function assigned to [variable].onclick is not being executed, despite no errors being displayed in the console

What could be causing my input box to act strangely when users attempt to input information?

Issue: [$injector:unpr] Provider not found: RequestsServiceProvider <- RequestsServiceFor more information on this error, please visit the website: http://errors.angularjs.org

An issue has occurred where an element is not interactable in Selenium Java due to it not being currently visible and unable to be manipulated

CSS: Ensuring the width is adjusted to the content or wrapper that is wider

Is there a way to prevent elements on a web page from shifting when the page width becomes narrow enough?