How Can I Create Js Event Listeners That Survive A Document.write?

I'm attaching an event listener to the window object. Then later in the script, document.write is being used. (I know, it's evil. I have no choice in the matter.) The problem is, t

Solution 1:

That is not possible. document.write unloads the current document, and creates a new one.

A demo to confirm: http://jsfiddle.net/Gk3cX/

window.test = document; //Cache documentdocument.write('<button onclick="alert(window.test===document)">CLick</button>');
// Clicking shows false! The document has changed!

Your only choice for overwriting the current document without unloading is innerHTML:

document.body.innerHTML = "Overwritten document's content, kept events.";

Solution 2:

The work-around I've found is to simply re-attach the listeners after the document.write.

Update: Doh! That works in Chrome, but FF throws an error:

attempt to run compile-and-go script on a cleared scope

http://jsfiddle.net/NYyKH/

Maybe if I unattach the handler before document.writing....

Update 2: nope: http://jsfiddle.net/sprugman/KzNbX/1/

Solution 3:

How about replacing document.write with your own function, that way it won't destroy the page.

Something like this:

document.write = function(str){
    document.body.innerHTML = str;
};

Or if you don't want to erase the whole page:

document.write = function(str){
    document.body.innerHTML += str;
};

DEMO: http://jsfiddle.net/Fuhzu/1/

Solution 4:

i haven't tried this with document.write, but maybe it helps: http://api.jquery.com/live/

Attach an event handler for all elements which match the current selector, now and in the future