View RSS Feed

ddadmin

"Operation Aborted" error in IE when inserting new elements into the DOM, and fix

Rating: 6 votes, 2.17 average.
The DOM lets you dynamically create and add elements to the page, such as the following, which creates an image on the fly and adds it to the end of the document:

Code:
var img=document.createElement("img")
img.setAttribute('src', 'dd.gif')
document.body.appendChild(img)
Ideally such an operation should be done after the document has loaded, though in most browsers, I noticed you can get away with it. In IE6 and IE7, however, things get a lot more unpredictable, and in the worst case scenario, disastrous. The exact curcumstances in which this can occur is described in the article "Why do I receive an "Operation aborted" error message when I visit a Web page in Internet Explorer?". I encountered this first hand while trying to debug Anylink JS Menu. This script dynamically adds a DIV to the page, with the operation run at the end of the document (instead of after it has fully loaded). I thought such timing would suffice in all the relevant browsers, and in my own testing, it does, including in IE6 and 7. Through bug reports posted on the forums, however, it became clear this wasn't always the case- depending on the page the script is added to, just calling the script- in turn trying to dynamically append an element to the document- at the bottom of the page isn't enough, and IE6/7 will fail, in a big way. Apparently when IE fails in inserting a new element to the document, it doesn't just spit out a JavaScript error, but it actually clears the entire page and shows a blank page with the error:

"Internet Explorer cannot open the Internet site. Operation Aborted".
It's as if you've just visited a page that failed to load. This is a severe error, and one that an illegal JavaScript operation should never lead to. But then again, we are talking about IE.

The fix is fairly simple- if you're attempting to dynamically create and insert new elements into the document, always do so either after the document has fully loaded, or its DOM has (DOMContentLoaded). The later is more desirable since it's fired much sooner than the former, though implementing it across browsers is more tricky. There are numerous tutorials on the web explaining how to check for DOM readiness, such as this and this tutorial.

And yes, Anylink JS Menu has been fixed for the aforementioned bug. It now is initialized on DOM ready. Here's the relevant piece of code it relies on:

Code:
domready:function(functionref){ //based on code from the jQuery library
	if (dd_domreadycheck){
		functionref()
		return
	}
	// Mozilla, Opera and webkit nightlies currently support this event
	if (document.addEventListener) {
		// Use the handy event callback
		document.addEventListener("DOMContentLoaded", function(){
			document.removeEventListener("DOMContentLoaded", arguments.callee, false )
			functionref();
			dd_domreadycheck=true
		}, false )
	}
	else if (document.attachEvent){
		// If IE and not an iframe
		// continually check to see if the document is ready
		if ( document.documentElement.doScroll && window == window.top) (function(){
			if (dd_domreadycheck) return
			try{
				// If IE is used, use the trick by Diego Perini
				// http://javascript.nwbox.com/IEContentLoaded/
				document.documentElement.doScroll("left")
			}catch(error){
				setTimeout( arguments.callee, 0)
				return;
			}
			//and execute any waiting functions
			functionref();
			dd_domreadycheck=true
		})();
	}
	// A fallback to window.onload, that will always work
	anylinkmenu.addEvent([window], function(){if (!dd_domreadycheck){functionref(); dd_domreadycheck=true}}, "load");
},

Submit ""Operation Aborted" error in IE when inserting new elements into the DOM, and fix" to del.icio.us Submit ""Operation Aborted" error in IE when inserting new elements into the DOM, and fix" to StumbleUpon Submit ""Operation Aborted" error in IE when inserting new elements into the DOM, and fix" to Google Submit ""Operation Aborted" error in IE when inserting new elements into the DOM, and fix" to Digg

Updated 06-04-2009 at 01:45 AM by ddadmin

Tags: None Add / Edit Tags
Categories
Web Design issues

Comments

  1. molendijk's Avatar
    And yes, Anylink JS Menu has been fixed for the aforementioned bug. It now is initialized on DOM ready
    There is still the problem of IE having issues with appendChild and dealing with document.write in its own particular way (see this). The following does not work properly in IE:
    Code:
    <head>
    <script type="text/javascript">
    AjaxInclude = function (url) {
    if (window.XMLHttpRequest) {Ajax=new XMLHttpRequest();} 
    else {Ajax=new ActiveXObject("Microsoft.XMLHTTP");}
    Ajax.open("GET",url,false);Ajax.send(null);
    var newdiv = document.createElement("span");
    newdiv.innerHTML = Ajax.responseText;
    var container = document.getElementById("container");
    container.appendChild(newdiv);
    }
    </script>
    </head>
    
    <body>
    <div id="container"></div>
    <script type="text/javascript">AjaxInclude("anylinkmenu.html")</script>
    Neither does this:
    Code:
    <head>
    <script type="text/javascript">
    AjaxInclude = function (url) {
    if (window.XMLHttpRequest) {Ajax=new XMLHttpRequest();} 
    else {Ajax=new ActiveXObject("Microsoft.XMLHTTP");}
    Ajax.open("GET",url,false);Ajax.send(null);
    document.write(Ajax.responseText);
    }
    </script>
    </head>
    <body>
    <script type="text/javascript">AjaxInclude("anylinkmenu.html")</script>
    (That's why I proposed this).
    ===
    Arie.