Dynamically loading an external JavaScript or CSS file - The Diigo Meta page

• 31 Dec 17
  

  Theo

  'dynamic loading' 'how-to store' 'javascript' 'code' 'Bookmarks bar'

• 13 Apr 15
  

  script, load external script, carica javascript dinamicamente, js esterno

  javascript

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

    }
• 07 Sep 14
  

  rajdgreat007
• 08 Aug 14
  

  rui cavaco

  javascript dynamic loading

• 04 Jul 14
  

  doylesee

  apps web javascript

• 03 Feb 13
  

  Pavel Dusek

  javascript

• 19 Jan 13
  

  giro bai

  "Dynamically loading external JavaScript and CSS files"

  dynamically loading external JavaScript CSS

• 03 Jan 13
  

  Tom Chen

  javascript tutorial

• 01 Oct 12
  

  simplyatomic
• 29 Sep 12
  

  Charlie Case

  dynamic javascript

• 23 Apr 12
  

  jspinoza3

  javascript load dynamic

• 29 Mar 12
  

  Anshul agrawal

  alert("Pet Name: " + petname)

  jquery

• 18 Mar 12
  

  Jakub Sevcech
  • in a nutshell, it means using  DOM methods to first cre
  • text/javascript
• 28 Dec 11
  

  crispalermo

  • 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, use   element.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_jones

  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, use element.appendChild() to add the element to the desired locat

  ajax

• 26 Sep 11
  

  Sean Cameron

  programming development javascript webdesign

• 13 Sep 11
  

  freeworld

  document.getElementsByTagName("head")[0].appendChild(fileref)

  dynamic javascript load

• 12 Sep 11
  

  Jimish Shah

  javascript dynamically load

• 28 Aug 11
  

  erop888

  javascript css JS function dynamic load

• 20 Jul 11
  

  jutlin lin

  javascript

• 13 Jul 11
  

  borislv

  javascript

• 11 Jun 11
  

  bruceeolson

  webTechniques

• 28 Mar 11
  

  silver chen
• 24 Mar 11
  

  yuukaa

  css webdev loading

• 23 Mar 11
  

  CSS HTML Javascript

• 01 Jan 11
  

  javascript tutorial webdesign Delicious

• 11 Dec 10
  

  Ed Donohue

  javascript loading load js css delicious

• 08 Nov 10
  

  kiko cuas

  s

  javascript css dynamic loading

• 29 Apr 10
  

  Roger Roch

  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 (filet

  javascript css dynamic loading

• 19 Apr 10
  

  dancecodes

  javascript css dynamic ajax loading programming js load loader me:icio

• 20 Jan 10
  

  mo ying

  loadjscssfile

  javascript web2.0

• 05 Jan 10
  

  me6iaton

  webdev articles js Динамическая подгрузка js

• 20 May 09
  

  usingsystem

  dynamically js load css file datei loading ajax snippet tutorial

• 22 Apr 09
  

  Laurentiu Ilie

  javascript

• 07 Apr 09
  

  Sergey Malochinskiy

  webdev javascript css loading

• 01 Dec 08
  

  Capt. Ben Smith

  javascript css dhtml

• 

  css javascript

• 29 Oct 08
  

  mwilly247

  javascript conditional css

• 03 Sep 08
  

  al ex

  css

• 

  cO Ob

  css

• 27 Aug 08
  

  Predrag Stojadinović

  webdev webdesign web tutorials tutorial tips scripting programming webdevelopment javascript ajax development code js optimization loading dynamic load web2.0

• 01 Jun 08
  

  nahueld

  javascript loading

• 06 May 08
  

  ajam ullu

  javascript css code

• 14 Apr 08
  

  Russel Tarr

  javascript

• 27 Feb 08
  

  alfred westerveld

  quickd

• 04 Feb 08
  

  rabidgadfly

  Load a .js or .css file dynamically from within js...

  javascript.loadExternal

• 22 Jan 08
  

  Harjeet Singh

  css html user-interface

  • 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 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, use   element.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
  

  Matt Vance
• 03 Dec 07
  

  ambienthack

  javascript ajax

• 01 Dec 07
  

  ajax css javascript programming tutorials

• 17 Nov 07
  

  Sandeep Kelvadi

  JS tutorial

• 15 Nov 07
  

  jasonlvogel

  javascript-loading css-loading file.include

• 06 Nov 07
  

  Richard Kendall

  Javascript css loading dynamic tips tutorial webdev

• 03 Nov 07
  

  aaron r

  Javascript tutorial

• 

  Gary Burge

  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.

  AJAX ondemand Javascript dynamic programming tutorials

• 02 Nov 07
  

  Jonas Flint

  ")

  javascript ajax

• 31 Oct 07
  

  S Jones

  javascript css dynamic loading _delicious

Would you like to comment?

Join Diigo for a free account, or sign in if you are already a member.