D
delraydog
I'm performing some simple DOM manipulation. Basically creating two
iframes, adding a bold element with text and then removing the bold
while preserving the text that was part of the bold element. In FireFox
1.0 this causes the browser to start the throbber and it does not stop.
The bug does not appear in FF 1.5 or in IE. Note, that the bug also
does NOT appear if I remove the second IFrame element and the DOM
manipulation on this element. Stepping through the code with the
Venkman debugger shows that the throbber begins when I execute the
following line in the iframeBug2 function:
_tmp1.parentNode.insertBefore(_tmp1.firstChild, _tmp1);
Note, also that the bug does NOT occur if I call the iframeBug2
function at the end of the iframeBug function. It only occurs when the
DOM manipulation occurs in response to the REMOVE button click. To test
this, load the following page and click the "Add" button this will
create two iframes with dynamically created bold elements, then select
Remove... you will see that the FF 1.0 browser continues to 'load'.
This is a GREATLY watered down example and the basic structure of what
I'm doing needs to be maintained with the important part being the
creation of the iframes, the creation of the bold node (within the
iframe) and the subsequent removal of the bold node with the
preservation of the text contents of the bold node...
Thanks, Cliff.
<html>
<head>
<title>Test Page</title>
<meta HTTP-EQUIV="Content-Type" CONTENT="text/html;
charset=iso-8859-1">
<meta HTTP-EQUIV="Pragma" CONTENT="no-cache">
<meta HTTP-EQUIV="expires" CONTENT="0">
<script LANGUAGE="JavaScript" TYPE="text/javascript"> <!--
iframeBug=function() {
iframe1=document.createElement("iframe");
document.body.appendChild(iframe1);
doc1=iframe1.contentWindow.document;
doc1.open();
doc1.write("<html><body>oldtext </body></html>");
doc1.close();
_tmp1=doc1.createElement("b");
_tmp1.innerHTML="bold";
doc1.body.appendChild(_tmp1);
iframe2=document.createElement("iframe");
document.body.appendChild(iframe2);
doc2=iframe2.contentWindow.document;
doc2.open();
doc2.write("<html><body>oldtext </body></html>");
doc2.close();
_tmp2=doc2.createElement("b");
_tmp2.innerHTML="bold";
doc2.body.appendChild(_tmp2);
};
iframeBug2=function() {
// Extract text child node from BOLD element
// insert before the BOLD element
// remove BOLD element (removed from example for clarity)
_tmp1.parentNode.insertBefore(_tmp1.firstChild, _tmp1);
_tmp2.parentNode.insertBefore(_tmp2.firstChild, _tmp2);
};
//--> </script>
</head>
<body>
<form NAME=myForm METHOD="post" ACTION="">
<input TYPE="button" value="Add IFrames w/ Bold
Text" ONCLICK="iframeBug();">
<input TYPE="button" value="Remove Bold"
ONCLICK="iframeBug2();">
</form>
</body>
</html>
iframes, adding a bold element with text and then removing the bold
while preserving the text that was part of the bold element. In FireFox
1.0 this causes the browser to start the throbber and it does not stop.
The bug does not appear in FF 1.5 or in IE. Note, that the bug also
does NOT appear if I remove the second IFrame element and the DOM
manipulation on this element. Stepping through the code with the
Venkman debugger shows that the throbber begins when I execute the
following line in the iframeBug2 function:
_tmp1.parentNode.insertBefore(_tmp1.firstChild, _tmp1);
Note, also that the bug does NOT occur if I call the iframeBug2
function at the end of the iframeBug function. It only occurs when the
DOM manipulation occurs in response to the REMOVE button click. To test
this, load the following page and click the "Add" button this will
create two iframes with dynamically created bold elements, then select
Remove... you will see that the FF 1.0 browser continues to 'load'.
This is a GREATLY watered down example and the basic structure of what
I'm doing needs to be maintained with the important part being the
creation of the iframes, the creation of the bold node (within the
iframe) and the subsequent removal of the bold node with the
preservation of the text contents of the bold node...
Thanks, Cliff.
<html>
<head>
<title>Test Page</title>
<meta HTTP-EQUIV="Content-Type" CONTENT="text/html;
charset=iso-8859-1">
<meta HTTP-EQUIV="Pragma" CONTENT="no-cache">
<meta HTTP-EQUIV="expires" CONTENT="0">
<script LANGUAGE="JavaScript" TYPE="text/javascript"> <!--
iframeBug=function() {
iframe1=document.createElement("iframe");
document.body.appendChild(iframe1);
doc1=iframe1.contentWindow.document;
doc1.open();
doc1.write("<html><body>oldtext </body></html>");
doc1.close();
_tmp1=doc1.createElement("b");
_tmp1.innerHTML="bold";
doc1.body.appendChild(_tmp1);
iframe2=document.createElement("iframe");
document.body.appendChild(iframe2);
doc2=iframe2.contentWindow.document;
doc2.open();
doc2.write("<html><body>oldtext </body></html>");
doc2.close();
_tmp2=doc2.createElement("b");
_tmp2.innerHTML="bold";
doc2.body.appendChild(_tmp2);
};
iframeBug2=function() {
// Extract text child node from BOLD element
// insert before the BOLD element
// remove BOLD element (removed from example for clarity)
_tmp1.parentNode.insertBefore(_tmp1.firstChild, _tmp1);
_tmp2.parentNode.insertBefore(_tmp2.firstChild, _tmp2);
};
//--> </script>
</head>
<body>
<form NAME=myForm METHOD="post" ACTION="">
<input TYPE="button" value="Add IFrames w/ Bold
Text" ONCLICK="iframeBug();">
<input TYPE="button" value="Remove Bold"
ONCLICK="iframeBug2();">
</form>
</body>
</html>