I have two HTML pages. The first one (index.html)has a button that will open a new window (page.html).
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>My Site</title>
<script>
function newWindow() {
window.open( "page.html", "My Page", "width=200,height=200" );
}
</script>
</head>
<body>
<h1>Title</h1>
<p>some paragraph</p>
<input type="button" value="New" onclick="newWindow()" />
</body>
</html>
The opened window (page.html) has a button that will erase the content of parent window and write new content
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Page</title>
<script>
function eraseMe() {
var doc = window.opener.document;
var kids = doc.childNodes;
for( var i = 0; i < kids.length; ++i ) {
doc.removeChild( kids[ i ] );
}
window.opener.document.write(
'<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">' +
'<html>' +
'<head></head>' +
'<body>' +
'<p>Mamma mia</p>' +
'</body>' +
'</html>'
);
}
</script>
</head>
<body>
<input type="button" value="Erase" onclick="eraseMe()" />
</body>
</html>
Everything works fine except after "eraseMe()" is executed, the browser won't stop loading. New content is written, yet the hour glass stall half way and the loading icon keeps endlessly turning; like if there was an infinite loop. So, any of you spot anything?
Thanks in advance.