javascript - How can I create JS event listeners that survive a document.write? - Stack Overflow

admin管理员组

文章数量:1026989

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, the document.write wipes out my listeners. Is is possible to avoid that?

Here's a fiddle that illustrates the problem: /

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, the document.write wipes out my listeners. Is is possible to avoid that?

Here's a fiddle that illustrates the problem: http://jsfiddle/Fuhzu/

• javascript
• events
• document.write

Share Improve this question Follow asked Dec 29, 2011 at 20:09 sprugmansprugman 19.8k3636 gold badges115115 silver badges164164 bronze badges 2

• 2 No choice? Can't use div id=me me.innerHTML = "hah"? Or hah = document.createElement(span) me.appendChild(hah)? – Travis J Commented Dec 29, 2011 at 20:18
• No -- I have to work with some other existing code. It's possible that that could someday be changed, but not immediately. – sprugman Commented Dec 29, 2011 at 21:11

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 3

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

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

window.test = document; //Cache document
document.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.";

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 pile-and-go script on a cleared scope

http://jsfiddle/NYyKH/

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

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

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/Fuhzu/1/

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

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

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, the document.write wipes out my listeners. Is is possible to avoid that?

Here's a fiddle that illustrates the problem: /

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, the document.write wipes out my listeners. Is is possible to avoid that?

Here's a fiddle that illustrates the problem: http://jsfiddle/Fuhzu/

• javascript
• events
• document.write

Share Improve this question Follow asked Dec 29, 2011 at 20:09 sprugmansprugman 19.8k3636 gold badges115115 silver badges164164 bronze badges 2

• 2 No choice? Can't use div id=me me.innerHTML = "hah"? Or hah = document.createElement(span) me.appendChild(hah)? – Travis J Commented Dec 29, 2011 at 20:18
• No -- I have to work with some other existing code. It's possible that that could someday be changed, but not immediately. – sprugman Commented Dec 29, 2011 at 21:11

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 3

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

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

window.test = document; //Cache document
document.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.";

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 pile-and-go script on a cleared scope

http://jsfiddle/NYyKH/

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

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

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/Fuhzu/1/

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

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

本文标签： javascriptHow can I create JS event listeners that survive a documentwriteStack Overflow