MochaUI, ExplorerCanvas and dynamically-loaded JavaScript

Published July 4th, 2008

Another one of those really obscure ones…

So as previously mentioned, I’m looking at using MochaUI in a CMS project I’m working on. Everything was going swimmingly, except that for some reason it was having rendering problems with (you guessed it) Internet Explorer. At first I thought that it must be a CSS problem, but lengthy experimentation suggested that this was not the case.

With the help of a colleague I eventually narrowed the problem down to MochaUI’s use of Google’s ExplorerCanvas library (excanvas), which provides a wrapper for IE that simulates canvas support. One wrinkle in our use of MochaUI is that the scripts are being loaded dynamically when needed (using MooTools‘ Asset methods). It turns out that excanvas expects to be loaded at page load time, so attaches its initalisation function to the page’s onreadystatechange event — waiting for the page to be ‘complete’ before initialising. Of course, this didn’t apply in our case since the page had already finished loading when the script was included. So it was never initialised.

All that was required to fix the problem was a slight change to the library’s init method (bear in mind, I downloaded the latest version (0002 — dated May 4 2007):

init: function (opt_doc) {
var doc = opt_doc || document;
if (/MSIE/.test(navigator.userAgent) && !window.opera) {
var self = this;
if(doc.readyState == "complete"){
self.init_(doc);
} else{
doc.attachEvent("onreadystatechange", function () {
self.init_(doc);
});
}
}
},

Category: Javascript | Tags: