Load external css file like scripts in jquery which is compatible in ie also

Question

Is there a way to load external CSS files  like we load JS file by using  getScript method and also use the callback function like in  getScript      lt link  gt         rel   stylesheet      type   text css      href    styles yourcss css     appendTo  head      This Works in FireFox and similar but not in IE

User · Answer

I think what the OP wanted to do was to load a style sheet asynchronously and add it. This works for me in Chrome 22, FF 16 and IE 8 for sets of CSS rules stored as text:

$.ajax({
    url: href,
    dataType: 'text',
    success: function(data) {
        $('<style type="text/css">\n' + data + '</style>').appendTo("head");                    
    }                  
});

In my case, I also sometimes want the loaded CSS to replace CSS that was previously loaded this way. To do that, I put a comment at the beginning, say "/* Flag this ID=102 */", and then I can do this:

// Remove old style
$("head").children().each(function(index, ele) {
    if (ele.innerHTML && ele.innerHTML.substring(0, 30).match(/\/\* Flag this ID=102 \*\//)) {
        $(ele).remove();
        return false;    // Stop iterating since we removed something
    }
});

User · Answer

Based on your comment under  Raul s answer  I can think of two ways to include a callback    Have getScript call the file that loads the css  Load the contents of the css file with AJAX  and append to  lt style gt   Your callback would be the callback from   get or whatever you use to load the css file contents

User · Answer

pageCSS   attr  href      css new css css

User · Answer

Quick function based on responses   loadCSS   function href       var cssLink       lt link gt          head   append cssLink     IE hack  append before setting href    cssLink attr       rel    stylesheet       type   text css       href  href             Usage   loadCSS   css file css

User · Answer

Here is a function that will load CSS files with a success or failure callback  The failure callback will be called just once  if one or more resources fail to load  I think this approach is better than some of the other solutions because inserting a  element into the DOM with an HREF causes an additional browser request  albeit  the request will likely come from cache  depending on response headers    function loadCssFiles urls  successCallback  failureCallback           when apply              map urls  function url                return   get url  function css                        lt style gt     css     lt  style gt    appendTo  head                                     then function             if  typeof successCallback      function   successCallback           fail function             if  typeof failureCallback      function   failureCallback                 Usage as so   loadCssFiles   https   test com style1 css    https   test com style2 css         function         alert  All resources loaded       function         alert  One or more resources failed to load          Here is another function that will load both CSS and javascript files   function loadJavascriptAndCssFiles urls  successCallback  failureCallback           when apply              map urls  function url                if url endsWith   css                      return   get url  function css                            lt style gt     css     lt  style gt    appendTo  head                                      else                   return   getScript url                                  then function             if  typeof successCallback      function   successCallback           fail function             if  typeof failureCallback      function   failureCallback

User · Answer

head   append   lt link gt     var css      head   children   last    css attr         rel    stylesheet         type   text css         href   address of your css

User · Answer

In jQuery 1 4       lt link  gt         rel   stylesheet      type   text css      href    styles yourcss css     appendTo  head      http   api jquery com jQuery  jQuery2

User · Answer

load css first  then print  lt link gt  to header  and execute callback       just set var href above this         ajax             url  href            dataType   css             success  function                                          lt link rel  stylesheet  type  text css  href    href      gt    appendTo  head                      your callback                           For Jquery 1 2 6 and above   omitting the fancy attributes functions above     I am doing it this way because I think that this will ensure that your requested stylesheet is loaded by ajax before you try to stick it into the head   Therefore  the callback is executed after the stylesheet is ready

[jquery] Load external css file like scripts in jquery which is compatible in ie also

Examples related to jquery