Question

I have made a bookmarklet to add a custom CSS file to any page. Works fine in FF and in Safari, but i can’t make it work in IE9.

Nothing happens in the DOM inspertor, and i get no error… 🙁 I have tried to execute it directly in the console, but same problem there…

Any help is appreciated.

This is my code:

(function(d,u){

if(d.createStyleSheet) {
  d.createStyleSheet( u );
} else {
  var styles = "@import url('"+u+"');",
      css=d.createElement('link');
  css.rel='stylesheet';
  css.href='data:text/css,'+escape(styles);
  d.getElementsByTagName("head")[0].appendChild(css);
}

}(document, "\\vmware-host\Shared%20Folders\css.css"))

This is the same code as bookmarklet…

javascript:(function(d,u){if(d.createStyleSheet){ d.createStyleSheet( u ); }else{var styles = "@import url('"+u+"');",css=d.createElement('link');css.rel='stylesheet';css.href='data:text/css,'+escape(styles);d.getElementsByTagName("head")[0].appendChild(css);}}(document, "\\vmware-host\Shared%20Folders\"))

edit when i put it directly to the URL, it tells me IE9 has modified the page to prevent cross site scripting :/ Any solution? (and it strips away the javascript: part and bing’s it :/ )

Answer 1

Try this – as suggested by ghommey – If you have issues due to different origins, then IE has tightened security (makes sense since css can do a lot of stuff) and you will need to use a proxy. That said: Have a look at IE9 Not applying linked style sheets

(function(d,u){

if(d.createStyleSheet) {
  d.createStyleSheet( u );
} else {
  var css=d.createElement('style');
  css.setAttribute("type","text/css");
  css.appendChild(document.createTextNode("@import url("+u+")"));
  d.getElementsByTagName("head")[0].appendChild(css);
}

}(document, "http://server/some.css"))

remember to escape backslashes if you are using local files – for example a server path
\\ needs to be \\\\