JavaScript Clashes

One common complaint that people have about a given JavaScript is that they can get it to work on one web page but not on another web page. Alternatively they may complain that they are trying to add two scripts to the same page and that whichever one they add first works until they add the second at which time both stop working. In both of these situations it usually means that the script hasn't been written properly to be completely unobtrusive.

A properly written JavaScript can be attached to the bottom of any web page and it should then work provided that the web page contains whatever ids that the script looks for in order to work out what part of the page to interact with. So the only reason why a properly written unobtrusive JavaScript might not work when added to a new page is if you forgot to add the appropriate HTML that the script is going to interact with - without that id the script will not know what part of the page to interact with. Of course scripts that simply interact with the whole page will not even need that. Also with properly written unobtrusive scripts the only possible way that two scripts can clash is if they both interact with the same id in ways that are incompatible with one another.

Far more likely is that the script isn't as unobtrusive as it should be and some part of the script that is exposed unnecessarily is clashing with other content in the page. Where this is the case the simplest solution is to rewrite the script properly. After all, an unobtrusive script is far easier to maintain than one that has pieces scattered everywhere and/or has parts of the script exposed where they can interfere with and be interfered with by other scripts.

The first thing to do to reduce the potential for script clashes is to remove all of the JavaScript that is jumbled in with the HTML. Anything inside an HTML tag that starts with on needs to be removed from the HTML as it is really JavaScript and it cannot be unobtrusive when it is jumbled with the HTML. For one thing when it is coded like that it needs to be in every page that calls the script instead of the code being provided once within the script itself. So delete those event handlers from the HTML and replace them with an id for your JavaScript to reference. You can then attach the JavaScript to that id using an event listener within the JavaScript itself. Note that you shouldn't replace it with an event handler in the JavaScript as JavaScript event handlers can still clash between scripts which is why they were replaced with event listeners. With event listeners two scripts can both attach the same listener to the same element and both will work where with event handlers the second one created will overwrite the first.

The second thing to do then is to replace any event handlers within the JavaScript with event listeners so as to make sure that the event processing this script performs cannot clash with that of another properly written script.

With the event processing taken care of the only other thing that can cause script clashes is the variables and functions that the various scripts use. Any that are globally defined can potentially clash with other scripts in the page. So all of the variables and functions need to be made local to the specific script. The only exception that is worth making (even though it increases the possibility of script clashes) is where you are going to use a script library to provide some functionality and where that functionality might need to be shared between the scripts within the page. Then you might have one variable defined globally that provides access to that library (for example the jQuery library only has one global variable called jQuery() that is exposed globally - and can optionally have $() exposed as an alias).

The first step in making sure all of your variables and functions are local to your script is to wrap your entire script inside an anonymous function. You do this by adding the following two lines to your script - the first line to the top of your script and the second line to the bottom.

(function() {
// your script goes here

The second step in making sure that all of your variables are locally defined is to replace all of the var references inside of each function (including the anonymous one you just added) with a single var statement immediately at the start of the function. Every variable name used in the function should be included in that var statement as a comma separated list. All variables defined inside a function exist from when the function starts until it finishes and so defining all of the variables first makes it clearer what the scope of those variables is.

This should be enough to make the script as completely unobtrusive as it is possible to make it. There is however one more step that we can perform to make absolutely certain that we didn't overlook adding a variable to the var statement. Modern browsers support a JavaScript variant called strict JavaScript that will actually stop the script from running if you try to use a variable without defining it. To tell thodse browsers that support strict JavaScript to apply this test we simply add one additional statement in front of the var statement - "use strict"; (note that this statement needs the quotes around it in order to stop the statement causing an error in antiquated browsers that do not support strict JavaScript. With this statement added your script will stop working if any variable is not defined provided that the browser you test in supports strict mode. The easiest way to work out whether your browser does support strict mode is to temporarily delete a variable from the var statement that you know the script uses and check that stops the script from running at all. If the script still runs in that situation then you need to find a more modern browser to test your script in.

With the above changes applied to ALL your scripts you will have removed almost all of the possibilities for the scripts to be able to clash with one another. The only reasons that will then exist for the script not working when added to the very bottom of your web page will be that you forgot to actually add the script or that the ids that the script requires are not in that web page or you have two scripts that are both trying to interact with the same id in incompatible ways. The first two of these three possibilities can be easily fixed by adding the missing elements to the page. The last of these is the only one that can't be fixed since in that one remaining instance where you have a script clash is because of an actual incompatibility between what the two scripts do (the equivalent of trying to drive your car forwards and backwards at the same time). The only thing that makes sense in that situation is to remove one of the two scripts from the page.


This article written by Stephen Chapman, Felgall Pty Ltd.

go to top

FaceBook Follow
Twitter Follow