Google Gadgets (IE)

I’ve spent the last few days getting my puzzle Gadget to work in Internet Explorer. In order to make the Gadget work in IE, I had to avoid one questionable practice, and code in one outrageous hack. Today, I’d like to talk about both.

Application Global (Problem)

The first cause of my difficulties seems to have been the way I structured my JS file. I like to take this approach:

// Support code
NameSpace1 = new function() {

	// Blah
	// Blah
	// Blah
}();

// Support code
NameSpace2 = new function() {

	// Blah
	// Blah
	// Blah
}();

// Application class
function App() {

	// Initialization code
}

// Application class methods
App.prototype.Function1 = function() {
};
App.prototype.Function2 = function() {
};
App.prototype.Function3 = function() {
};

// Application object
app = new App();

Now, you might argue that the “new” statement dangling at the bottom of the file isn’t safe, and that it ought to be invoked inside an onload event. You might be right, but it’s worked fine until now. IE doesn’t like it when this approach is used with a Google Gadget, however.

Application Global (Solution)

This fix for this one is pretty simple: Remove the application global from the JS file, and place a SCRIPT tag like the following inside the Gadget’s markup:

<SCRIPT type="text/javascript">
	gadgets.util.registerOnLoadHandler(function() { new App(); });
</SCRIPT>

(I’ve observed that gadgets.util.registerOnLoadHandler can’t be reliably invoved from an external JS file; it’s best to call it from an inline SCRIPT tag.)

Javascript Caching (Problem)

My second problem was more frustrating: It involved Google’s back-end mangling my external JS files. I had included the following two SCRIPT tags in my Gadget’s markup:

<SCRIPT type="text/javascript" src="http://www.house-o-games.com/neknek/gadgets/play/MochiKit.js"></SCRIPT>
<SCRIPT type="text/javascript" src="http://www.house-o-games.com/neknek/gadgets/play/play.js"></SCRIPT>

These lines imported the MochiKit library and my application-specific code. When I examined the source code of my rendered Gadget, however, I found that they had been replaced by the following line:

<SCRIPT src="//1-sandbox.gmodules.com/gadgets/concat?refresh=86400&container=ig&rewriteMime=text/javascript&gadget=http%3A%2F%2Fwww.house-o-games.com%2Fneknek%2Fgadgets%2Fplay.xml&fp=-182800334&1=http%3A%2F%2Fwww.house-o-games.com%2Fneknek%2Fgadgets%2Fplay%2FMochiKit.js&2=http%3A%2F%2Fwww.house-o-games.com%2Fneknek%2Fgadgets%2Fplay%2Fplay.js" type="text/javascript"></SCRIPT>

If you look at this tag carefully, it’s pretty clear what’s going on: Google has grabbed the contents of the JS files referenced by my two SCRIPT tags, and stuffed them into a single file associated with my Gadget. Whatever the result was, IE did not like it at all.

(Extra fun: The replacement described above does not happen all the time; it happens sometimes. This, together with the fact that it obviously doesn’t work 100% correctly, makes me question exactly how stable the Google Gadgets initiative really is.)

Javascript Caching (Solution)

The solution was to create SCRIPT tags dynamically, in order to hide them from Google’s mangler code. I stole the technique, if not the rationale, from the code Google provides to insert Google Analytics Tracing Code into web pages:

<SCRIPT type="text/javascript">
	var i, externs;
	externs = [	'http://www.house-o-games.com/neknek/gadgets/play/MochiKit.js',
			'http://www.house-o-games.com/neknek/gadgets/play/play.js'];

	for (i = 0; i < externs.length; i++)
		document.write(unescape("%3Cscript src='" + externs[i] + "' type='text/javascript'%3E%3C/script%3E"));
</SCRIPT>

With this change, and the onload tweak mentioned above, I was able to make my Gadget work in IE.

IE/Gadget Specific

I should make clear that these issues seem specific to the combination of Google Gadgets and IE. My original gadget worked fine in FF, and my AJAX demo (which both directly includes JS and creates the application object as a global) works fine in IE. Whatever is happening involves a pretty specific collision between Google's back-end and Internet Explorer.

Hopefully similar problems won't hit you, but if they do, perhaps these notes will prove helpful.

The Future

With this, we come to the penultimate post of my puzzle project. Tomorrow, we'll take a look back at the Adwords campaign and overall traffic, and see what we've learned. Over the weekend, you'll get some lighter posts, and on Monday we'll start something new. I hope you enjoy it.

Yesterday's Stats

Oh well. They can't all be winners.