Internet Explorer freezing on DOM manipulations

[Hogne Titlestad]

Hello!

I am wondering about how to get around a problem I'm having with Internet
Explorer 6 for Windows XP. I have a script that lets the user set up a
house with alarms and heating, and it spans four screens which are all
switched back and forth by Javascript with CSS calls. The sections are all
inserted into the DOM tree when the script loads - less HTML to write, more
control in Javascript over the content.

When I change the innerHTML in one of the objects ( this.object.innerHTML =
htmlvariable ), then Internet Explorer freezes and seems to have crashed. I
can not move the browser window, and I can not scroll it. I can not click
on any of the window contents save the input buttons (which is kind of
obscure) - and the javascript seems to be in an infinite loop - although
there is no loop in my script. The only way to revive the browser window is
to use a known trick: to minimize the window (which still works), and then
to maximize it, which seems to restore everything in a working order.

It is worth noting that my script works in all the browsers I know about of
importance: Mozilla/Firefox, Konqueror/Safari and Opera.

I would love to hear similar stories and most of all how any of you got
around this problem, or if there is a solution. All suggestions are
welcome!

Hogne T.

 

[Evertjan.]

Hogne Titlestad wrote on 05 jan 2005 in comp.lang.javascript:

When I change the innerHTML in one of the objects (
this.object.innerHTML = htmlvariable ), then Internet Explorer freezes
and seems to have crashed.

URL?

 

[Hogne Titlestad]

Sorry! =)

http://www.blest.no/enokfinal/

Hogne T.

 

[Evertjan.]

Hogne Titlestad wrote on 05 jan 2005 in comp.lang.javascript:

Sorry! =)

http://www.blest.no/enokfinal/

[please do not toppost on usenet]

It seems(??) your javascript takes a while executing on loading.

After that the freeze ends, [depending on the processing speed perhaps]

Could you cut down on the scripting or make it more efficient?

 

[Hogne Titlestad]

Hello!

Try loading again - I just put it online with the wrong IP of the MySQL
server.



Hogne T.

 

[Fred Oz]

Sorry! =)

[...]

A tip:

Your resizeIframe uses browser detection rather than feature
detection. Feature detection is much more reliable and by
putting the test for getElementById first, you accommodate most
browsers in the first test:

function resizeIframe ( ){
if (document.getElementById) {
document.getElementById("content_frame").style.height =
(window.innerHeight-48) + "px";
} else if (document.all) {
document.all["content_frame"].style.height =
(document.body.clientHeight - 48) + "px";
}

Now, in which one of the 12 referenced JavaScript files or on
which page or in which frame can your misbehaving innerHTML
function be found?

 

[Hogne Titlestad]

The problem is that all browsers support getElementById, also Internet
Explorer. And only Internet Explorer accepts document.all[] properly, in my
experience. So my check might not even be needed. All the code should run
100% on all browsers, including IE 6.0.

As for the offending file, look in js_bolig*

Hogne T.

 

[Fred Oz]

The problem is that all browsers support getElementById, also Internet
Explorer. And only Internet Explorer accepts document.all[] properly, in my
experience. So my check might not even be needed. All the code should run
100% on all browsers, including IE 6.0.

And therefore feature detection is better than browser detection,
as earlier versions of IE don't support getElementById.

Some of your scripts (e.g. js_bolig.js) use getElementsById
without any testing.

Another hint, in your file js_order.js you have:

cOrderGUI.prototype.hide = function ( )
{
this.object.style.top = "-2000px";
this.object.style.visibility = "hidden";
}

Which appears to be an attempt to make the 'object' disappear
completely and take up zero space on the page. If that is what is
required, use:

cOrderGUI.prototype.hide = function ( )
{
this.object.style.display = "none";
}

To show the object again, use display = "";

As for the offending file, look in js_bolig*

I suspect your problem is those massive slabs of innerHTML.
The Firefox developers seem to have made innerHTML run like a top
so it's faster than IE (but sluggish in Safari).

You could make huge gains in efficiency if you replaced your
innerHTML tables with equivalent CSS and DOM. For example,

+"<table width=\"100%\" cellspacing=\"0\" cellpadding=\"0\"
border=\"0\">"
+"<tbody>"
+" <tr>"
+" <td width=\"100%\" style=\"background: #000000;
border-bottom: 2px solid #dddddd\">"
+" <img src=\"gfx/topgfx_1.jpg\" width=\"100%\"><br>"
+" </td>"
+" </tr>"
+" </tbody>"
+"</table>"

Appears to do no more than place an image, which could be done
with fewer lines of code had DOM methods been used. And if you
are placing many images, create a "placeimage" function and pass
it the appropriate parameters.

Similarly, make "createTable", "createTD", "createTR", etc.
functions that you just pass parameters to and they add the
appropriate DOM object to your page.

If you insist on innerHTML, replace the concatenated lines with
an array, then join it. e.g.:

iHTML = [
"<table width=\"100%\" cellspacing=\"0\" ",
" cellpadding=\"0\" border=\"0\">",
"<tbody>",
...
"</table>"
];
this.object.innerHTML = iHTML.join();

It runs about 25% faster than concatenating strings (though your
mileage may vary...).

 

[Hogne Titlestad]

Hey!

Found the solution, and it is so simple that it sucks, don't mind my
wording! Hehe

All I needed to do, as a whack hack, was, in a typical IE workaround way:

window.blur();
window.focus();

And automagically, the frozen window seems never to get frozen at all.

I found this out, cuz not only minimizing the browser window would fix the
frozen state, but also clicking outside the window, or on the startbar, and
then back again.

Had MSIE been open source, this would probably be fixed by a bug report. Now
where to send it

Thanks for all your suggestions! Specially you, Fred.

Hogne

 

[Michael Winter]

Please quote *relevant* text (delete the rest) from previous posts when
responding.

[snip]

And only Internet Explorer accepts document.all[] [...]

Other browsers support it including Opera and ICEBrowser.

[snip]

Mike