Dynamically adding an external JavaScript or CSS file in java web application

Question

I want to add an external JavaScript or CSS file in my test.html dynamically. I know about this trick:

 $(”).appendTo(�?head’).attr({

 rel: �?stylesheet’,

 type: �?text/css’,

 href: �?**htttp://192.168.30.229:8080/**javascripts/jwysiwyg/jquery.wysiwyg.css’

});

I want to save the url(http://192.168.30.229:8080/) of css and javascript on xml file for example web.xml, and read the url from web.xml file and append it to the href so if the url has to changed for example **:http://192.168.100.229:7071/ the code in the html has'nt to be changed.

How shoud I write/read that url in the xml file and use it in the test.html?

Answer 1

1. You can use javascript in your html page to load external javascript or css: http://www.javascriptkit.com/javatutors/loadjavascriptcss.shtml

2. You need to dynamically generate html in order to change a part of it. You can use JSP for this. Define <context-param in your web.xml and then reference it in JSP page:

   <context-param>
     <param-name>someUrl</param-name>
     <param-value>http://192.168.1.1:8080/something</param-value>
   </context-param>
   

and then reference it in JSP:

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

Answer 2

function removejscssfile(filename, filetype){
    var targetelement=(filetype=="js")? "script" : (filetype=="css")? "link" : "none" //determine element type to create nodelist from
    var targetattr=(filetype=="js")? "src" : (filetype=="css")? "href" : "none" //determine corresponding attribute to test for
    var allsuspects=document.getElementsByTagName(targetelement)
    for (var i=allsuspects.length; i>=0; i--){ //search backwards within nodelist for matching elements to remove
    if (allsuspects[i] && allsuspects[i].getAttribute(targetattr)!=null && allsuspects[i].getAttribute(targetattr).indexOf(filename)!=-1)
        allsuspects[i].parentNode.removeChild(allsuspects[i]) //remove element by calling parentNode.removeChild()
    }
}

removejscssfile("somescript.js", "js") //remove all occurences of "somescript.js" on page
removejscssfile("somestyle.css", "css") //remove all occurences "somestyle.css" on page

The function starts out by creating a collection out of either all "SCRIPT" or "LINK" elements on the page depending on the desired file type to remove. The corresponding attribute to look at also changes accordingly ("src" or "href" attribute). Then, the function sets out to loop through the gathered elements backwards to see if any of them match the name of the file that should be removed. There's a reason for the reversed direction- if/whenever an identified element is deleted, the collection collapses by one element each time, and to continue to cycle through the new collection correctly, reversing the direction does the trick (it may encounter undefined elements, hence the first check for allsuspects[i] in the if statement). Now, to delete the identified element, the DOM method parentNode.removeChild() is called on it.