Do you ever get the dreaded “Operation Aborted” errors on IE6 and IE7? If you have, you have likely spent hours trying to figure out the cause, staring at code, commenting out code and searching the internet looking for solutions.

On my last project I hit these errors too, and here are some of the causes and their solutions:

Cause 1:
You are attempting to modify the DOM before the DOM is ready.

Possible Solution 1:
Move all your code that modifies the DOM to the bottom of the page. Just before the closing BODY tag.

Possible Solution 2:
Defer all your JavaScript execution until after the page has loaded.

<script type="text/JavaScript" defer="defer">
<!—JavaScript code here --> 
</script>

A word of warning with this approach, defer is handled differently with different browsers (isn’t this always the case) and the differences are very subtle.

Possible Solution 3:
Use code to determine when the DOM is ready, and then modify the DOM at that point. More on this topic in a follow up post.

Possible Solution 4:
Use the onLoad event to run the code that will modify the DOM. The onLoad event is executed the same across all browsers.

This solution is the cleanest, though not always possible depending on what you want to do.

Cause 2:
You are attempting to modify a parent node of the DOM element you are contained in.

Solution 1:
You cannot modify parent DOM elements from one of its child nodes. Move the JavaScript code up to the same level of the node you are attempting to modify.

Labels: DOM, HTML, IE, Javascript