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 script element so that it’s a direct child of body.
  • Use insertBefore() to insert the div at the beginning of body instead 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.

Comments

  1. José Jeria

    Another solution is to add the defer attribute to the script tag. This will make the script to execute when the DOM is completely loaded.

    IE throws this error when you try to manipulate the DOM before its completely loaded.

Understanding JavaScript Promises E-book Cover

Demystify JavaScript promises with the e-book that explains not just concepts, but also real-world uses of promises.

Download the Free E-book!

The community edition of Understanding JavaScript Promises is a free download that arrives in minutes.