Wednesday, November 27, 2013

old macdonald had a computer, IE, IE, Ohhhhh

Back to some "make this work with older IE" issues.

My company has a javascript library for communicating with our service, and then an optional "renderer" for displaying data from the service.

While I wouldn't bother making the "renderer" without jQuery, we thought having the core library being jQuery-independent was a good idea, since the only thing we were using jQuery for was ajax calls. I previously discussed what that looked like but there was an IE-7 (at least) gotcha; it doesn't have "JSON" as a built-in, so the code wasn't working. The quickest solution then was to grab Crockford's json2 which will make a JSON object only if it doesn't exist already.

The renderer pulls down dynamic display information from the server and builds some custom CSS. Previously it would inject that CSS (in the variable "buf") via jQuery with the following line:
$("<style>").prop("type", "text/css").html(buf).appendTo("head");
That broke on IE. phpied.com offered a solution and a crossbrowser, legacy-friendly equivalent code looks like this:
var ss1 = document.createElement('style');
ss1.setAttribute("type", "text/css");
var hh1 = document.getElementsByTagName('head')[0];
hh1.appendChild(ss1);
if (ss1.styleSheet) {   // IE
   ss1.styleSheet.cssText = buf;
} else {                // the world
   var tt1 = document.createTextNode(buf);
   ss1.appendChild(tt1);
}
Ah well, I've seen worse.

No comments:

Post a Comment