How to include external js,css files with javascript

This post explains about how to include external javascript files (js files) and styles sheets (css files) using javascript. The following functions to include external javascript files and css(style sheet) files in a one javascript file.
 

JavaScript Function

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

PHP code to include the javascript and css

To call this functions in one javascript file with

 echo "loadjscssfile('".BASEPATH."styles.css', 'css');";
 echo "loadjscssfile('".BASEPATH."functions.js', 'js');";

and in a php file starting of the page include below line to treat the php file as a javascript file.
 

Put this code starting of the file

<?php header("content-type: application/x-javascript"); ?>

Hope that it will be useful.

For more php headers http://www.anillabs.com/2011/04/examples-for-php-headers-301302404/

Anil Kumar Panigrahi

With more than 10 years experience in PHP and Founder of Anil Labs, a blog for PHP and related posts. contributed posts regarding CodeIgniter, CakePHP and Learn PHP online ... Contact : [email protected]

You may also like...

4 Responses

  1. Heinz Stapff says:

    “and in a php file starting of the page include below line to treat the php file as a javascript file.”

    Do you mean the top of the php get file? Or Bellow the echo base path statement in that file.

    There realy is no clarity in what you have said or demonstrated. Sorry, I’m at a complete lose as to how to do this.

  1. September 19, 2010

    […] Więcej: how to include external js,css files with javascript « ANIL KUMAR … […]

  2. September 19, 2010

    […] Przeczytaj artykuł: how to include external js,css files with javascript « ANIL KUMAR … […]

  3. September 18, 2011

    […] http://www.anil2u.info/2010/09/how-to-include-external-jscss-files-with-javascript/ In some servers DOMDocument(); is not working. For this we have to change the code like below <?php // initialize a new curl resource $ch = curl_init(); // set the url to fetch curl_setopt($ch, CURLOPT_URL, $xml); // don't give me the headers just the content curl_setopt($ch, CURLOPT_HEADER, 0); // return the value instead of printing the response to browser curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1); // use a user agent to mimic a browser curl_setopt($ch, CURLOPT_USERAGENT, 'Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.7.5) Gecko/20041107 Firefox/1.0'); $details = curl_exec($ch); // remember to always close the session and free all resources curl_close($ch); ?> […]