The dreaded Operation Aborted error
At one point or another, it seems like most web developers have run into the dreaded “Operation Aborted” in Internet Explorer. Microsoft has acknowledge that it’s a bug and provided a detailed writeup of the situation. As usual, their writeup is wordy and hard to understand. I’ve been investigating this problem more thoroughly and wanted to provide a sane writeup of the problem and its solutions.
The problem occurs when a script node is contained within an element and the script is trying to modify that element’s parent or ancestor. For example, the following example page causes an operation aborted error:
<html>
<head>
<title>Operation Aborted Example</title>
</head>
<body>
<p>The following code should cause an Operation Aborted error in IE versions prior to 8.</p>
<div>
<script type="text/javascript">
document.body.appendChild(document.createElement("div"));
</script>
</div>
</body>
</html>
The problem in this case is that the script element is contained within a div, and the script is attempting to modify document.body, which is the div‘s parent. You can replace the div with any other element and the result will be the same (I’ve seen examples that use form and table elements, but it really doesn’t matter). You can fix the problem in several ways:
- Move the
scriptelement so that it’s a direct child ofbody. - Use
insertBefore()to insert thedivat the beginning ofbodyinstead of the end. - Wait until the page is loaded before attempting to manipulate
document.body.
Of course, the best solution will depend entirely on what you’re trying to do.
The good news is that Internet Explorer 8 won’t throw an operation aborted error under any circumstances. Instead, it throws a regular JavaScript error that explains the situation:
HTML Parsing Error: Unable to modify the parent container element before the child element is closed (KB927917).
This is also a difficult-to-understand error message, but it more accurately described the problem and is much better than operation aborted.
