Hello !
We have the following situation - when Ajax request is sent what's
being returned by the server is usually an XML (which is used for DOM
updates) but sometimes it's HTML which is a whole new page that should
replace an existing one. I.e when we issue an Ajax request we don't
know what will be returned and analyze the response to act accordingly.
Now, the way to replace the current document with a new one used to be
easy and portable for both browsers (we're only supporting IE6 and
Firefox 1.5):
document.open();
document.write( head );
document.write( body );
document.close();
where "head" and "body" are two parts of the result HTML. We had to cut
it to two (rather than going simply with document.write( NewHTML ))
because of IE - our head section contains references to external
JavaScript files (<script type="text/javascript"
src="sth.js"></script>) and IE only loads them when document.write()
call ends. So if body contains any script block (<script
type="text/javascript".. </script>) using any of JS referenced by
head - IE would fail with something like "Resource undefined" if we
push the whole new HTMl in one go by using document.write( NewHTML ).
But it worked perfectly fine in Firefox, meaning
document.open();
document.write( NewHTML );
document.close();
did the job just fine. What's even more important - it also evaluated
all JavaScripts correctly - both in external files referenced by the
head and in the JS blocks embedded in the body.
Until Firefox 1.5.0.6/7 where things stopped working completely - our
lovely and used-to-be portable code
document.open();
document.write( head );
document.write( body );
document.close();
caused Firefox to loose all CSS/JS and display an HTML only page (as if
CSS/JS were disabled). Removing document.close(); improved the
situation a bit by displaying the page with CSS this time but still -
*no* JavaScript was evaluated (meaning, JavaScript blocks embedded in
the document's body were not evaluated).
I took a different path from this point by pushing the new content to
document's head and body "innerHTML". It worked but not for JS
evaluation - I had to do that manually. To evaluate the JS referenced
in the head section of the document - I've traversed the head's DOM
tree while looking for the "script" nodes, then downloaded all of them
one by one using a synchronous Ajax calls (don't laugh!) and eval()-ed
the response. To evaluate JS blocks embedded in the body of the
document - I've traversed the body's DOM tree while looking for the
"script" nodes and eval()-ed them.
The problem is following: eval()-ing external JS files after
downloading them with Ajax doesn't work in 100% of cases - some
statements using Prototype functions fail to execute ("prototype.js" is
one of external JS files referenced in the head). Anyway, I'm almost
sure that what I'm doing is plain wrong, i.e it's sounds silly to
download all JS files referenced in the head and eval() them !
So how do I fix it ? Simply put - how do I replce the content of the
document to the completely new one received as a response to
asynchronous Ajax call ? The new content conatins doctype, head, body -
it's a completely new page. And all JS referenced in the head and
embedded in the body should be evaluated as well.
I really wish
document.open();
document.write( head );
document.write( body );
document.close();
was working in Firefox as before. Is it simply a Firefox bug, should I
submit it ?
Btw, document.open.write.write.close() works just fine in IE6.
Will be *very* grateful to hear any advise, thanks you all !
