I am writing this as a result of helping several users with problems which were eventually diagnosed as being caused by the Microsoft Internet Explorer DOM readiness,
domready or Event.domReady bug/problem.
Problem symptoms:
- Problem DOES NOT occur when using
Gecko based browsers (Firefox, etc) and
Presto based browsers (Opera, etc).
- Problem DOES occur when using
Trident (Internet Explorer) and
WebKit (Safari, Google Chrome) based browsers AND JavaScript(s).
- Problem is most likely to occur with the standard mootools JavaScript libraries used by Joomla! 1.5.x or other Joomla! Extensions (such as SOBI2), but can occur with any JavaScript that relies on DOM readiness
Depending on;
Internet Explorer Browser settings for;
Internet Options->Advanced Settings->Browsing
- Disable script debugging (Internet Explorer)
- Disable script debugging (Other)
- Display a notification about every script error
- etc, etc
and which version of Internet Explorer is used (6, 7, 8, 8 in compatibility mode),
and what other IE Browser options are enabled or disabled,
then,
Internet Explorer;
may not (obviously) report any errors,
may report in bottom left corner of browser window the message "Done, but with errors on page",
may report "Operation Aborted",
may report "HTML Parsing Error",
may display "Internet Explorer cannot display the webpage"
may report some other error,
and,
the User browsing the web site may experience the problem as;
requested page to be displayed is inaccessible - "Operation aborted"
or
only part of the expected page/document display can be seen on screen,
or
the page/document display is incomplete, (missing elements which should be displayed)
or
symptoms may vary on Browser "page refresh"
This is often a difficult problem to diagnose since the symptoms are so varied and users can report the problems in a variety of ways, often not mentioning which Browser (and hence which
Layout engine) they are using.
Clearly, the
Why do I receive an "Operation aborted" error message when I visit a Web page in Internet Explorer? is an obvious symptom and easier to diagnose and hence resolve.
In the above link reference, Microsoft imply that the problem is resolved with IE8, but in practice it is often just more difficult to diagnose, Refer
What Happened to Operation Aborted?Problem Solution (for mootools):
Replace all 'domready' (or equivalent JavaScript functions) with 'load'
and to save you having to search and modify potentially hundreds of JavaScripts, there is a convenient Joomla! Extension
ReReplacer, that can do this for you.
Refer
IE Operation Aborted - EASY FIX!Explanation:
I am no JavaScript expert, or expert at anything, so the following is a layman's (or conceptual) explanation of the problem.
What is 'domready'?'domready' is a JavaScript event handler built into many JavaScript libraries to delay execution of JavaScripts until the Browser has finished loading the DOM or DOM Tree and is ready to manipulate it. Different JavaScript libraries have defined different names for this event handler.
mootools uses the name domready,
JQuery uses 'ready' , but essentially they all do the same thing, delay execution of JavaScript code until the Browser has finished loading the DOM and it is ready to be manipulated.
Gecko based browsers (Firefox, etc) and
Presto based browsers (Opera, etc) support two proprietary Events known as
DOMContentLoaded and
DOMFrameContentLoaded which occur after the page/document/frame has loaded but before all the slow images, applets, Flash movies, etc, have completed loading. Unfortunately,
Trident based browsers (Microsoft Internet Explorer) and
WebKit based browsers (Safari, Google Chrome, etc) do not provide such a proprietary event, so it has to be emulated/simulated with
JavaScript work-arounds.
What is the DOM?DOM is an acronym for
Document Object Model.
The DOM is a W3C (World Wide Web Consortium) standard.
The DOM defines a standard for accessing 'elements' in documents in constructed in HTML and XML.
The W3C Document Object Model (DOM) is a platform and language-neutral interface that allows programs and scripts to dynamically access and update the content, structure, and style of a document.
The
HTML DOM defines the objects and properties of all HTML elements, and the methods (interface) to access them.
In other words: The HTML DOM is a standard for how to access, change, add, or delete HTML elements in a HTML document.
Refer
HTML DOM IntroductionUnfortunately the W3C DOM does not define a 'DOM ready'
DOM event in either the W3C
Level 1 or
Level 2 specification. I believe the W3C
draft (DOM) Level 3 Events Specification specifies and event
DOMActive which may be an eventual solution to the problem (assuming it is implemented by all Browsers!)
When is the DOM ready?Almost every Browser has a method or menu option for showing the HTML "Page Source" of the currently viewed Page/Document. The DOM is 'ready' when the Browser has received and parsed the entire source of this HTML Page/Document from either the Server or its own cache, but before the Browser has loaded all
HTML Multimedia <img />,
<object />,
<embed>, etc, files, and CSS
background-image files.
Why is DOM ready used?Before a domready function was developed, JavaScript programmers used the '
window.
onload' event to trigger the execution of a JavaScript. However using the '
window.
onload' has two issues;
(i) the event only occurs after the Browser has loaded ALL Page/Document elements (such as image files, flash files, etc), and as a consequence web pages can appear to be slow to interact with, (especially as many menu systems utilize JavaScript),
(ii) other JavaScripts may overwrite/redefine what should occur on the '
window.
onload' event.
'domready' provides a convenient way of solving these two problems.
How is the DOM used?There are many ways JavaScripts can use the DOM.
Joomla!, SOBI2, and many other
Joomla! Extensions use
DOM Events and JavaScript to dynamically inject additional HTML into, or manipulate the existing HTML of, the 'standard' HTML output in a document. Other uses are to dynamically change the
CSS properties of
HTML elements. This is how mootools and other JavaScripts achieve their visual effects. (Refer
http://www.mootorial.com/wiki/mootorial/06-fx/03-fx.transitions)
For example,
(i)
Joomla! Tooltips are HTML elements that are dynamically displayed when 'mousing' over 'standard' document HTML elements.
(ii) SOBI2 uses JavaScripts to dynamically display 'Category Selection' in the 'Please Select a Category' section of the Add Entry Form
(iii) All Joomla! WYSIWYG Editor plugins (as used by SOBI2) use JavaScript to implement their editing functions.
So what is the problem with Internet Explorer?Firefox and Opera 9+ (for example) have a check for DOM readiness (
DOMContentLoaded and
DOMFrameContentLoaded) built into the Browser proprietary
Layout engine functionality (
Gecko for Firefox and others,
Presto for Opera and others), but the
Trident Layout engine used by Internet Explorer does not, so JavaScript programmers have to implement a workaround for Browsers using the Trident and other Layout engines to determine when the DOM is ready.
Refer
Relying on DOM readiness to invoke a function (instead of window.onload)Joomla! relies on mootools to check for DOM readiness.
Mootools v1.11 and 1.2.x has a bug/flaw in that it is reporting DOM ready in Internet Explorer before the DOM is ready, and apparently this is not going to be fixed until mootools v2.0. Refer
domready is fired after before load in all IE versionsI don't understand, what is the problem with Internet Explorer?I will try and explain a little further.
When using Internet Explorer with mootools and JavaScripts that rely on mootools, it is possible that those JavaScripts may begin executing before the DOM has completely loaded and accessible to those JavaScripts.
So if, for example, a JavaScript was designed to insert the HTML
<span style="color:red;">This is a Test</span> between the tags
<div class="test">and
</div> that JavaScript would fail if Internet Explorer had not yet loaded and parsed the part of the document that contained the tags
<div class="test"> and
</div>.
This is also why the problem can be variable, since the time taken to load the DOM HTML varies depending on a number factors.
So this is a SOBI2 problem?Not that I am aware of.
In every instance where I have encountered a problem, the problem was actually caused by Joomla! and mootools. It just appears to be a SOBI2 problem, because you are looking at/for SOBI2 output, but that output has been aborted by the Browser, usually because of a Joomla! tooltip or some other mootools related event elsewhere in the page/document being output.
So this is a mootools problem?Well yes and no.
If the
Trident Layout engine used by Internet Explorer had the capability to internally determine when the DOM was ready, (like
the Gecko Layout engine has), then the problems would be minimized. In the meantime, mootools and other JavaScript libraries have to implement work-arounds for the Trident and other Layout engines.
It is not just a mootools problem, the Yahoo! library has a similar problem. (Refer
When IE says DOM is ready but it ain't true)
So this is a Microsoft Internet Explorer problem?Well yes and no.
IE/Trident does not implement all W3C standard DOM events (Refer
Comparison of layout engines (Document Object Model) -
Events) as completely as other Browsers do, but what else is new, it's Microsoft right? But to make things even more difficult for software developers, Microsoft IE does not have equivalent events for all W3C standard events, and also implements a different
Advanced event registration model.
So there is no easy solution for cross browser support for JavaScripts?Correct,
at least not if you want to have 'fast' user interaction with a web page rather than waiting for the entire page contents (image files, flash files, etc) to have finished loading before executing JavaScript, and
at least not while Microsoft continues to define and implement it's own proprietary extensions that diverge from the
W3C Standards and the proprietary extensions used by the other major web browsers.
Also seeSOBI2 and JavaScript ConflictsDiagnosing JavaScript problemsWhat is a layout engine?List of layout enginesComparison of layout enginesComparison of layout engines (HTML)Comparison of layout engines (XML)Comparison of layout engines (XHTML)Comparison of layout engines (graphics)Comparison of layout engines (CSS)Comparison of layout engines (DOM)Comparison of layout engines (HTML 5)Comparison of layout engines (ECMAScript) - (particularly JavaScript)Comparison of layout engines (SVG)I hope this helps - Mark
