Question

I am developing a survey invitation that can be embedded in many sites. To present the invitation I am using Modalbox, a javascript library that shows an animated modal box over a semi-transparent overlay.

This Modalbox library depends on Prototype and script.aculo.us/effects libraries. The invitation will be dynamically embedded in sites that I don’t own and can’t statically modify their markup.

At the load time I check (in JS) if Prototype is loaded like:

if (typeof Prototype == "undefined") {
    document.write('<script type="text/javascript" src="http://mysite.com/lib/prototype.js"><\/script>');
}

if (typeof Effect == "undefined") {
    document.write('<script type="text/javascript" src="http://mysite.com/lib/scriptaculous.js?load=effects"><\/script>');
}

All works well with the majority of sites since they usually don’t load Prototype.js nor script.aculo.us. There are some site which load them and I don’t have to load them and again it works.

HOWEVER… there are sites that already loads them but have OLDER versions (Modalbox requires Prototype 1.6.0 and script.aculo.us 1.8.0) such as 1.4.0 / 1.5.1

How can I dynamically unload/replace prototype and/or script.aculo.us in Javascript? Is it possible?

Answer 1

You may be able to do this technically, but are you willing to risk breaking the rest of the page just so that your plugin works? There could be good reasons why these sites haven’t upgraded — such as compatibility with other plugins that don’t work with newer versions. I’d suggest that you either require the sites that use your code to have the minimum version of Prototype (by examining Prototype.Version) or including it, as you are, when it is not found. Do the same with Scriptaculous.

This will allow the user of your code to make decisions on how best to proceed. Either they can upgrade their page (most likely, since the older version is probably being used due to inertia) or drop your plugin.