calendarNovember 20, 2007 in HttpWatch , Internet Explorer , Javascript

Some customers contacted us recently to ask why they were seeing http://:/ recorded in HttpWatch. This URL produces an ‘Error 0x57’ in IE 6 and ERROR_INTERNET_INVALID_URL on IE 7.

The sites causing these errors had one thing in common. They were either using the jQuery or YUI javascript libraries. It was not immediately obvious where this URL was being generated because there was nothing in the DOM with that URL when we checked with the IE Developer Toolbar.

We set up a simple test page using the commented version of the jQuery library. If you access this page using HttpWatch you will see http://:/ being recorded as the page is loaded:

jQuery Demo

Then we searched for //:  guessing that IE was adding the http: prefix and the trailing forward slash.  HttpWatch highlighted the following piece of code in jquery.js. It is used on IE to generate an event that is equivalent to Firefox’s DOMContentLoaded:

IE Defer Script Hack

The jQuery library avoids using the standard window.onload event because it doesn’t fire until the page and all its images have been completely downloaded. This can lead to significant delays in providing javascript based functionality on a page. The advantage of using the DOMContentLoaded event is that it fires as soon as the page’s DOM elements can be safely accessed from javascript.

The workaround for the lack of the DOMContentLoaded event in IE uses a temporary <script> block to generate an event. However, the onreadystatechanged event of the <script> block will only fire at the correct time if the defer attribute is used and the script block has a src attribute. The value used in the src attribute causes the invalid URL that was recorded in HttpWatch.

The temporary <script> block is deleted when the event is triggered leaving no trace in the page’s DOM.

A similar workaround for IE is used in the YUI library:

YUI Defer Script Hack

You can see the resulting http://:/ if you go to the YUI Event Example:

YUI Event Example

The //: value in the src attribute is a compromise solution. If it contained a real URL it would trigger an extra network round-trip. The invalid URL used does cause the error seen in HttpWatch but the effect on performance if minimal. In the YUI Event Example shown above it only adds 3 milliseconds to the download time of the whole page.

Ready to get started? TRY FOR FREE Buy Now