javascript - Webkit - dynamically created stylesheet - when does it really load? -


i have code (it's not mine slickgrid library) creates <style> element, inserts dom, tries find new stylesheet in document.stylesheets collection.

in webkit fails. don't have idea circumstances are, it's nothing that's consistently reproducible. figured work around changing code check stylesheet object doesn't happen until load event on style element, so:

  $style = $("<style type='text/css' rel='stylesheet' />").appendto($("head"));   var rules = ...;// code create text of rules here   if ($style[0].stylesheet) { // ie     $style[0].stylesheet.csstext = rules.join(" ");   } else {     $style[0].appendchild(document.createtextnode(rules.join(" ")));   }   $style.bind('load', function() {           functionthatexpectsthestylesheet();   });

and functionthatexpectsthestylesheet attempts locate actual stylesheet object so:

    var sheets = document.stylesheets;     (var = 0; < sheets.length; i++) {       if ((sheets[i].ownernode || sheets[i].owningelement) == $style[0]) {         stylesheet = sheets[i];         break;       }     }

but @ point, stylesheet object not found.

so, question this:

  1. does load event in fact not guarantee stylesheet object available? bug?
  2. if not, there condition can use or need using timeouts?
  3. or there problem way i'm binding load event , that's problem?

dynamically loading css stylesheets still area filled browser quirks, unfortunately. in webkit, <style> , <link> elements both fire load , error events when loading stylesheets. however, load event means stylesheet resource has been loaded, not has been added document.stylesheets.

the require-css requirejs loader deals issue branching loading mechanism based on useragent sniffing (it impossible feature-detect whether or not <link> tag fire load event properly). webkit, detection resorts using settimeout find when stylesheet object has been attached document.stylesheets

var webkitloadcheck = function(link, callback) {   settimeout(function() {     (var = 0; < document.stylesheets.length; i++) {       var sheet = document.stylesheets[i];       if (sheet.href == link.href)         return callback();     }     webkitloadcheck(link, callback);   }, 10); }

so while load event fire on webkit, unreliable purposes of being able access corresponding stylesheet instance. engine supports stylesheet load events firefox 18+.

disclosure: contributor require-css

references:


Comments

Post a Comment