JavaScript cloneNode crashing IE - don't want to use .innerHTML - JSexpert level needed

[Vince]

JavaScript cloneNode is crashing IE 8 - been at this all day - anyone
any ideas to point me in the right direction - by any chance?

I am getting an "Internet Explorer has encountered a problem & needs
to close" message when I use cloneNode with IE 8 in compatibility mode
or regular IE 8 mode - the same code works fine with firefox, opera
etc - ie just crashes when using IE

I've isolated the problem & put it on one page at:
http://www.hypermap.com/clonenode_fails_demo.html

This code validates as XHTML strict.

I'm trying to work out a workaround using cloneNode or something else
- I don't want to use .innerHTML (not standards compliant) & if I
can't resolve this using cloneNode I cannot use cloneNode of-course.

So I'm hoping that some one out there has a spare moment, the required
in-depth knowledge of JS & are feeling generous. I've put some alert
debugs in that you should see - the object that cloneNode is called on
seems to be formed OK by document.getElementById call.

This demo crashes in IE when you click the top hyperlink to close the
information (this works fine) then click the hyperlink again to show
the information - the problem occurs at line - after a few alert
debugs appear:

var $newamazoncarouselPlayer = $amazoncarouselPlayer.cloneNode
($bool_t);

& later (if allowed to get that far) at line :

var $newamazonsearchPlayer = $amazonsearchPlayer.cloneNode
("true");

ie if I comment some of the code above it to avoid the first cause of
the IE crash.

(btw the cloneNode is necessary to copy the last drawer's node in my
app - the node gets passed around as user's elects to click a link to
open various draws one after the other but it is not 100% necessary to
do this in this demo with only 1 opening & closing drawer)

Thanks to anyone who feels they can help - in advance.

 

[Jeremy J Starcher]

I've isolated the problem & put it on one page at:
http://www.hypermap.com/clonenode_fails_demo.html

Works fine for me: Windows XP SP3
IE 8.0.6001.18702


Or does it crash under IE tester on the same machine.

You might want to disable any plugins and the like and re-test.

 

[Garrett Smith]

JavaScript cloneNode is crashing IE 8 - been at this all day - anyone
any ideas to point me in the right direction - by any chance?

I am getting an "Internet Explorer has encountered a problem & needs
to close" message when I use cloneNode with IE 8 in compatibility mode
or regular IE 8 mode - the same code works fine with firefox, opera
etc - ie just crashes when using IE

I've isolated the problem & put it on one page at:
http://www.hypermap.com/clonenode_fails_demo.html

This code validates as XHTML strict.

I'm trying to work out a workaround using cloneNode or something else
- I don't want to use .innerHTML (not standards compliant) & if I
can't resolve this using cloneNode I cannot use cloneNode of-course.

Node method cloneNode(deep) requires a boolean value for argument 0.

[...]

var $newamazoncarouselPlayer = $amazoncarouselPlayer.cloneNode
($bool_t);

& later (if allowed to get that far) at line :

var $newamazonsearchPlayer = $amazonsearchPlayer.cloneNode
("true");

That is a string value. I don't know what $bool_t is but if it is not a
boolean value, you are entering the realm of error correction. The
expected outcome of the program is indeterminable.

Please post a reduced test case that clearly demonstrates the problem.

 

[Vince]

JavaScript cloneNode is crashing IE 8 - been at this all day - anyone
any ideas to point me in the right direction - by any chance?

I am getting an "Internet Explorer  has encountered a problem & needs
to close" message when I use cloneNode with IE 8 in compatibility mode
or regular IE 8 mode  - the same code works fine with firefox, opera
etc - ie just crashes when using IE

I've isolated the problem & put it on one page at:
http://www.hypermap.com/clonenode_fails_demo.html

This code validates as XHTML strict.

I'm trying to work out a workaround  using cloneNode or something else
- I don't want to use .innerHTML (not standards compliant) & if I
can't resolve this using cloneNode I cannot use cloneNode of-course.

Node method cloneNode(deep) requires a boolean value for argument 0.

[...]

var $newamazoncarouselPlayer = $amazoncarouselPlayer.cloneNode
($bool_t);

& later (if allowed to get that far) at line :

        var $newamazonsearchPlayer = $amazonsearchPlayer.cloneNode
("true");

That is a string value. I don't know what $bool_t is but if it is not a
boolean value, you are entering the realm of error correction. The
expected outcome of the program is indeterminable.

Please post a reduced test case that clearly demonstrates the problem.

Thanks & possibly a very good point -
The reason for :
var $bool_t = true;
alert($bool_t);
was to try & ensure that the value passed was of type boolean - anyway
since this does not work & to be doubly sure I've decide to change the
code to just pass 1 (true)

I've changed the code at http://www.hypermap.com/clonenode_fails_demo.html
to:
$amazoncarouselPlayer.style.display = "block";
alert($amazoncarouselPlayer.innerHTML);
// make a copy, remove the original and append the copy to the end
var $newamazoncarouselPlayer = $amazoncarouselPlayer.cloneNode(1);
alert($newamazoncarouselPlayer);
var $expandableid = $amazoncarouselPlayer.parentNode
alert("Hi1");
I think passing 1 should be enough to indicate that a boolean value is
being passed & it's value is true - even though it's an integer being
passed.

Anyway it still crashes IE & never it gets to the alert("Hi1")

I'm using IE version 8.0.6001.18702 on XP btw

Vince

 

[Vince]

re: Please post a reduced test case that clearly demonstrates the
problem.

I substantially reduced the original code to this one page - the
reason for leaving the code as is is to show the HTML code the
cloneNode is acting upon & the context. If anyone clicks on the very
top hyperlink twice to close then open the information area they will
see a number of alerts before the information area opens - it opens
fine in firefox etc but IE crashes before we get to the alert("Hi1");
- hopefully that clearly illustrates the problem.

I've not copied the code here as it's a bit long - so you need to look
at the source code of this page
http://www.hypermap.com/clonenode_fails_demo.html to see it

Thanks Vince

 

[Garrett Smith]

JavaScript cloneNode is crashing IE 8 - been at this all day - anyone
any ideas to point me in the right direction - by any chance?
I am getting an "Internet Explorer has encountered a problem & needs
to close" message when I use cloneNode with IE 8 in compatibility mode
or regular IE 8 mode - the same code works fine with firefox, opera
etc - ie just crashes when using IE
I've isolated the problem & put it on one page at:
http://www.hypermap.com/clonenode_fails_demo.html
This code validates as XHTML strict.
I'm trying to work out a workaround using cloneNode or something else
- I don't want to use .innerHTML (not standards compliant) & if I
can't resolve this using cloneNode I cannot use cloneNode of-course.

Node method cloneNode(deep) requires a boolean value for argument 0.

[...]

var $newamazoncarouselPlayer = $amazoncarouselPlayer.cloneNode
($bool_t);
& later (if allowed to get that far) at line :
var $newamazonsearchPlayer = $amazonsearchPlayer.cloneNode
("true");

That is a string value. I don't know what $bool_t is but if it is not a
boolean value, you are entering the realm of error correction. The
expected outcome of the program is indeterminable.

Please post a reduced test case that clearly demonstrates the problem.

Thanks & possibly a very good point -
The reason for :
var $bool_t = true;
alert($bool_t);
was to try & ensure that the value passed was of type boolean - anyway
since this does not work & to be doubly sure I've decide to change the
code to just pass 1 (true)

NO, 1 is not true. 1 is a number, true is a boolean value. Two different
types.

If you want expected results, use standard code.

I've changed the code at http://www.hypermap.com/clonenode_fails_demo.html
to:
$amazoncarouselPlayer.style.display = "block";
alert($amazoncarouselPlayer.innerHTML);
// make a copy, remove the original and append the copy to the end
var $newamazoncarouselPlayer = $amazoncarouselPlayer.cloneNode(1);
alert($newamazoncarouselPlayer);
var $expandableid = $amazoncarouselPlayer.parentNode
alert("Hi1");
I think passing 1 should be enough to indicate that a boolean value is
being passed & it's value is true - even though it's an integer being
passed.

You are entering the realm of error correction. The expected outcome of
the program is indeterminable.

Furthermore, relying on implicit type conversion for host objects and
methods is known to be error-prone. Don't do that. Just use |true| or
|false|.

Please reduce the testcase to the simplest possible code that will
trigger the crash.

 

[Vince]

As suggested I've reduced the problem code to as short a script that
still demonstrates the cloneNode crashing IE problem but that works
fine in firefox etc- (quite a good exercise in itself) this can be
seen at : http://www.hypermap.com/demo_reduced.html - I have also
ensured that the parameter passed is a boolean value.

IE8 recovers from the crash showing the crash message & after this re-
loads the page. I've tested this in IE6 today on XP & it completely
crashes the IE browser program in this version when cloneNode is
called.

I've copied the reduced demo (demo_reduced.html) code here, it
validates correctly as XHTML strict:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Demo</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<script type="text/javascript">
function test_cloneNode() {
var $amazoncarouselPlayer = document.getElementById
("amazon_carousel");
alert("amazoncarouselPlayer.innerHTML:" +
$amazoncarouselPlayer.innerHTML);
// make a copy, remove the original and append the copy to the end
var $bool_value = true;
alert("boolean value $bool_value: " + $bool_value + ", calling
$amazoncarouselPlayer.cloneNode($bool_value); next - this crashes in
IE, OK in firefox etc &amp; therefore alert('next remove original
carousel'); never shows in IE &amp; the deep cloneNode works in
firefox, opera &amp; chrome");
var $newamazoncarouselPlayer = $amazoncarouselPlayer.cloneNode
($bool_value);
alert('next remove original carousel');
var $expandableid = $amazoncarouselPlayer.parentNode
$expandableid.removeChild($amazoncarouselPlayer);
alert('now append new clone of the original carousel');
$expandableid.appendChild($newamazoncarouselPlayer);
}
</script>
</head>
<body>
<div>
<a href="#" onclick="test_cloneNode(); return false;">To Test Click
Here</a>
<div id="append_parent">
<div id="amazon_carousel">
<script type='text/javascript'>
var amzn_wdgt={widget:'Carousel'};
amzn_wdgt.tag='hypermapcom-21';
amzn_wdgt.widgetType='SearchAndAdd';
amzn_wdgt.searchIndex='All';
amzn_wdgt.keywords='Beatles';
amzn_wdgt.title='Beatles';
amzn_wdgt.width='600';
amzn_wdgt.height='200';
amzn_wdgt.marketPlace='GB';
</script>
<script type='text/javascript' src='http://wms.assoc-amazon.co.uk/
20070822/US/js/swfobject_1_5.js'>
</script>
</div>
</div>
</div>
</body>
</html>

 

[SAM]

Le 9/13/09 2:29 AM, Vince a écrit :

As suggested I've reduced the problem code to as short a script that
still demonstrates the cloneNode crashing IE problem but that works
fine in firefox etc- (quite a good exercise in itself) this can be
seen at : http://www.hypermap.com/demo_reduced.html - I have also
ensured that the parameter passed is a boolean value.

as all seems to work normally if the element to clone and replace is not
a Flash

IE8 recovers from the crash showing the crash message & after this re-
loads the page. I've tested this in IE6 today on XP & it completely
crashes the IE browser program in this version when cloneNode is
called.

Windows almost crashed too !

what's working (IE6, Fx3) :

function test_cloneNode() {
var $amazoncarouselPlayer = document.getElementById("amazon_carousel");
var $amazoncarouselCode = $amazoncarouselPlayer.innerHTML;
alert("amazoncarouselPlayer.innerHTML:" + $amazoncarouselCode);
//empty the original
alert('we empty the original');
$amazoncarouselPlayer.innerHTML = '';
// fill up back the carousel
alert('rewrite the carousel');
$amazoncarouselPlayer.innerHTML = $amazoncarouselCode;
}

 

[Garrett Smith]

As suggested I've reduced the problem code to as short a script that
still demonstrates the cloneNode crashing IE problem but that works
fine in firefox etc- (quite a good exercise in itself)

Yes, but it is important. You can also get rid of the $bool variable,
just use literal |true|.

I was able to reproduce the crash in IE7.

[snip code]

Cloning the OBJECT/EMBED (yes, this script writes an EMBED for Firefox)
and not the div that contains it avoids the crash in IE7 and IE8, but
the clone is not shown in IE6.

Can you reduce the test case to just use OBJECT and do not use the
swfobject.js? You might want to copy the HTML that swfobject.js
generates and just use that in the document.

 

[GTalbot]

As suggested I've reduced the problem code to as short a script that
still demonstrates the cloneNode crashing IE problem but that works
fine in firefox etc- (quite a good exercise in itself) this can be
seen at :http://www.hypermap.com/demo_reduced.html- I have also
ensured that the parameter passed is a boolean value.

IE8 recovers from the crash showing the crash message & after this re-
loads the page. I've tested this in IE6 today on XP & it completely
crashes the IE browser program in this version when cloneNode is
called.

I've copied the reduced demo (demo_reduced.html) code here, it
validates correctly as XHTML strict:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Demo</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<script type="text/javascript">
function test_cloneNode() {
    var $amazoncarouselPlayer = document.getElementById
("amazon_carousel");
    alert("amazoncarouselPlayer.innerHTML:" +
$amazoncarouselPlayer.innerHTML);
    // make a copy, remove the original and append the copy to the end
    var $bool_value = true;
    alert("boolean value $bool_value: " + $bool_value + ", calling
$amazoncarouselPlayer.cloneNode($bool_value); next - this crashes in
IE, OK in firefox etc &amp; therefore alert('next remove original
carousel'); never shows in IE &amp; the deep cloneNode works in
firefox, opera &amp; chrome");
    var $newamazoncarouselPlayer = $amazoncarouselPlayer.cloneNode
($bool_value);
    alert('next remove original carousel');
    var $expandableid = $amazoncarouselPlayer.parentNode
    $expandableid.removeChild($amazoncarouselPlayer);
    alert('now append new clone of the original carousel');
    $expandableid.appendChild($newamazoncarouselPlayer);}

</script>
</head>
<body>
<div>
<a href="#" onclick="test_cloneNode(); return false;">To Test Click
Here</a>
<div id="append_parent">
<div id="amazon_carousel">
    <script type='text/javascript'>
    var amzn_wdgt={widget:'Carousel'};
    amzn_wdgt.tag='hypermapcom-21';
    amzn_wdgt.widgetType='SearchAndAdd';
    amzn_wdgt.searchIndex='All';
    amzn_wdgt.keywords='Beatles';
    amzn_wdgt.title='Beatles';
    amzn_wdgt.width='600';
    amzn_wdgt.height='200';
    amzn_wdgt.marketPlace='GB';
    </script>
    <script type='text/javascript' src='http://wms.assoc-amazon.co.uk/
20070822/US/js/swfobject_1_5.js'>
    </script>
</div>
</div>
</div>
</body>
</html>

Hello,

http://wms.assoc-amazon.co.uk/20070822/US/js/swfobject_1_5.js
is a 9 Kbytes script and, after removing it, there is no crash in IE
8. So, that webpage
http://www.hypermap.com/demo_reduced.html
is still not a reduced testcase.

regards, Gérard

 

[Vince]

Replacing the failing line of code :
<script type='text/javascript' src='http://wms.assoc-amazon.co.uk/
20070822/US/js/swfobject_1_5.js'>
</script>
with the script this line generated on the fly for firefox :
<embed type="application/x-shockwave-flash" src="http://
ws.amazon.co.uk/widgets/q?
MarketPlace=GB&amp;Operation=GetDisplayTemplate&amp;ServiceVersion=20070822&amp;WS=1&amp;ID=Carousel"
style="" id="amzn_widget" name="amzn_widget" quality="high"
bgcolor="#FFFFFF" allowscriptaccess="always"
flashvars="MarketPlace=GB&amp;Operation=GetDisplayTemplate&amp;ServiceVersion=20070822&amp;WS=1&amp;ID=Carousel&amp;Tag=hypermapcom-21&amp;WidgetType=SearchAndAdd&amp;SearchIndex=All&amp;Keywords=Beatles&amp;Title=Beatles&amp;Width=600&amp;Height=200"
width="600" height="200"/>

still shows the flash carousel & stops IE crashing on cloneNode but
IE's cloneNode method (function) still fails to copy the node
correctly instead showing an empty image area instead of the cloned
carousel.

see http://www.hypermap.com/demo_reduced_4.html

so it seems it is either incompetence on Microsoft developers part or
deliberate sabotage of their version of JavaScript as regards
cloneNode to fail to handle Adobe type="application/x-shockwave-flash"
embedded objects or something else - I think it's the first option
myself but I don't rule out the second give Microsoft's use of Sun's
Java language a few years back - what ever firefox, chrome etc have no
problem with handling http://www.hypermap.com/demo_reduced_4.html

Thanks for all your help those that posted here - I'm going to have to
rethink the design of what I am trying to do to not use cloneNode
(or .innerHTML).

I'll post here any work around that I find in case it is useful to
someone else in the future.

Vince.

 

[Garrett Smith]

Replacing the failing line of code :
<script type='text/javascript' src='http://wms.assoc-amazon.co.uk/
20070822/US/js/swfobject_1_5.js'>
</script>
with the script this line generated on the fly for firefox :

The script generates OBJECT for IE and OBJECT is standard.

http://www.w3.org/TR/REC-html40/struct/objects.html#h-13.3

Why not use OBJECT and forget EMBED?

<embed type="application/x-shockwave-flash" src="http://
ws.amazon.co.uk/widgets/q?
[...]


still shows the flash carousel & stops IE crashing on cloneNode but
IE's cloneNode method (function) still fails to copy the node
correctly instead showing an empty image area instead of the cloned
carousel.

I saw that on 6, but did see the movie copied on 7 and 8.

see http://www.hypermap.com/demo_reduced_4.html

I'm getting a 404 on that link.