ddadmin

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");
},