This link has been bookmarked by 114 people . It was first bookmarked on 28 Nov 2007, by Harjeet Singh.
-
31 Dec 17
-
13 Apr 15
-
functionloadjscssfile(filename, filetype){if(filetype=="js"){//if filename is a external JavaScript filevarfileref=document.createElement('script')fileref.setAttribute("type","text/javascript")fileref.setAttribute("src", filename)}elseif(filetype=="css"){//if filename is an external CSS filevarfileref=document.createElement("link")fileref.setAttribute("rel","stylesheet")fileref.setAttribute("type","text/css")fileref.setAttribute("href", filename)}if(typeoffileref!="undefined")document.getElementsByTagName("head")[0].appendChild(fileref)}
-
-
07 Sep 14
-
08 Aug 14
-
04 Jul 14
-
03 Feb 13
-
19 Jan 13
giro bai"Dynamically loading external JavaScript and CSS files"
-
03 Jan 13
-
01 Oct 12
-
29 Sep 12
-
23 Apr 12
-
29 Mar 12
-
18 Mar 12
-
in a nutshell, it means using DOM methods to first cre
-
text/javascript
-
-
28 Dec 11
-
Dynamically loading external JavaScript and CSS files
To load a .js or .css file dynamically, in a nutshell, it means using DOM methods to first create a swanky new "
SCRIPT" or "LINK" element, assign it the appropriate attributes, and finally, useelement.appendChild()to add the element to the desired location within the document tree. It sounds a lot more fancy than it really is. Lets see how it all comes together:function loadjscssfile(filename, filetype){ if (filetype=="js"){ //if filename is a external JavaScript file var fileref=document.createElement('script') fileref.setAttribute("type","text/javascript") fileref.setAttribute("src", filename) } 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) } loadjscssfile("myscript.js", "js") //dynamically load and add this .js file loadjscssfile("javascript.php", "js") //dynamically load "javascript.php" as a JavaScript file loadjscssfile("mystyle.css", "css") ////dynamically load and add this .css file
-
-
28 Sep 11
greg_jonesTo load a .js or .css file dynamically, in a nutshell, it means using DOM methods to first create a swanky new "SCRIPT" or "LINK" element, assign it the appropriate attributes, and finally, use element.appendChild() to add the element to the desired locat
-
26 Sep 11
-
13 Sep 11
-
12 Sep 11
-
28 Aug 11
-
20 Jul 11
-
13 Jul 11
-
11 Jun 11
-
28 Mar 11
-
24 Mar 11
-
23 Mar 11
-
01 Jan 11
-
11 Dec 10
-
08 Nov 10
-
29 Apr 10
Roger Rochfunction loadjscssfile(filename, filetype){ if (filetype=="js"){ //if filename is a external JavaScript file var fileref=document.createElement('script') fileref.setAttribute("type","text/javascript") fileref.setAttribute("src", filename) } else if (filet
-
19 Apr 10
-
20 Jan 10
-
05 Jan 10
-
20 May 09
-
22 Apr 09
-
07 Apr 09
-
01 Dec 08
-
29 Oct 08
-
03 Sep 08
-
27 Aug 08
-
01 Jun 08
-
06 May 08
-
14 Apr 08
-
27 Feb 08
-
04 Feb 08
-
22 Jan 08
-
Dynamically loading an external JavaScript or CSS file
<script type="text/javascript"><!-- google_ad_client = "pub-3356683755662088"; google_ad_width = 250; google_ad_height = 250; google_ad_format = "250x250_as"; google_ad_type = "text_image"; google_ad_channel =""; google_color_border = "FFFFFF"; google_color_bg = "FFFFFF"; google_color_link = "3333FF"; google_color_url = "999999"; google_color_text = "000033"; //--></script> <script src="http://pagead2.googlesyndication.com/pagead/show_ads.js" type="text/javascript"> </script>The conventional way to loading external JavaScript (ie:.js) and CSS (ie:.css) files on a page is to stick a reference to them in the HEAD section of your page, for example:<head> <script type="text/javascript" src="http://www.javascriptkit.com/myscript.js"></script> <link rel="stylesheet" type="text/css" href="main.css" /> </head>
Files that are called this way are added to the page as they are encountered in the page's source, or synchronously. For the most part, this setup meets our needs just fine, though in the world of synchronous Ajax design patterns, the ability to also fire up JavaScript/ CSS on demand is becoming more and more handy. In this tutorial, lets see how it's done.
Dynamically loading external JavaScript and CSS filesTo load a .js or .css file dynamically, in a nutshell, it means using DOM methods to first create a swanky new "
SCRIPT" or "LINK" element, assign it the appropriate attributes, and finally, useelement.appendChild()to add the element to the desired location within the document tree. It sounds a lot more fancy than it really is. Lets see how it all comes together:function loadjscssfile(filename, filetype){ if (filetype=="js"){ //if filename is a external JavaScript file var fileref=document.createElement('script') fileref.setAttribute("type","text/javascript") fileref.setAttribute("src", filename) } 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)
-
-
04 Dec 07
-
03 Dec 07
-
01 Dec 07
-
17 Nov 07
-
15 Nov 07
-
06 Nov 07
-
03 Nov 07
-
Gary BurgeIn the world of synchronous Ajax design patterns, the ability to also fire up JavaScript/ CSS on demand is becoming more and more handy. In this tutorial, lets see how it's done.
-
02 Nov 07
-
31 Oct 07
Would you like to comment?
Join Diigo for a free account, or sign in if you are already a member.