ansaurus

Question

JavaScript - controlling the insertion point for document.write

Answer 1

+2 A:

Original Answer before the edit:

Basically the problem of document.write is that it does not work in XHTML documents. The most broad solution then (as harsh as it may seem) is to not use XHTML/xml for your page. Due to IE+XHTML and the mimetype problem, Google Adsense breaking (may be a good thing :), and the general shift towards HTML5 I don't think it's as bad as it seems.

However if you'd really like to use XHTML for your page, then John's script that you linked to is the best you've got at this point. Just sniff for IE on the server. If the request is from IE, don't do anything (and don't serve the application/xhtml+xml mimetype!). Otherwise drop it into the <head> of your page and you're off to the races.

Re-reading your question, is there a specific problem you have with John's script? It is known to fail in Safari 2.0 but that's about it.

Crescent Fresh 2009-10-08 11:03:18

My page is not using XHTML, but I load the 3rd party scripts after the DOM was loaded, and they override my page.My problem is that the following code will fail:document.write( '<' +'div'); <br/>document.write( '>' + 'Text Content' + '<'); <br/>document.write('\div>');

yeeeev 2009-10-08 11:09:11

@yeeeev: wow, so this has nothing to do with XHTML? You should really put that code into your question as a code snippet so we can help you better. It appears incorrectly as a comment.

Crescent Fresh 2009-10-08 11:12:09

@yeeev: I see you actually tried putting it in already. Let me edit your question....

Crescent Fresh 2009-10-08 11:13:15

Answer 2

A:

In order to alter the content of the page after the DOM has rendered you need to either use a javascript library to append HTML or text at certain points (jQuery, mootools, prototype, ...) or just use the innerHTML property of each DOM element to alter/append text to it. This works crossbrowser and doesn't require any libraries.

ChrisR 2009-10-10 10:34:00

Answer 3

A:

There are better ways to do this. 2 ways

1) Append

<html><head>
<script>
  window.onload = function () {
    var el = document.createTextNode('hello world');
    document.body.appendChild(el);
  }
</script></head><body></body></html>

2) InnerHTML

<html><head><script>
  window.onload = function () {
    document.body.innerHTML = 'hello world';
  }
</script></head><body></body></html>

Robert Cabri 2009-10-12 15:39:17

No love for the correct answer?

Allen 2009-12-30 14:40:06

This solution is useless if you can't alter the 3rd party script. Also solution #2 would replace the whole body with 'hello world'. Typo?

gregers 2010-01-20 14:38:24

Answer 4

+1 A:

You may be interested in the Javascript library I developed which allows to load 3rd party scripts using document.write after window.onload. Internally, the library overrides document.write, appending DOM elements dynamically, running any included scripts which may use document.write as well.

Unlike John Resig's solution (which was part of the inspiration for my own code), the module I developed supports partial writes such as the example you give with the div:

document.write("<"+"div");
document.write(">"+"Done here<"+"/");
document.write("div>");

My library will wait for the end of the script before parsing and rendering the markup. In the above example, it would run once with the full string "<div>Done here</div>" instead of 3 times with partial markup.

I have set up a demo, in which I load 3 Google Ads, an Amazon widget as well as Google Analytics dynamically.

Eric Bréchemier 2009-11-22 21:58:23

Answer 5

+2 A:

If you're dealing with 3rd party scripts, simply replacing document.write to capture the output and stick it in the right place isn't good enough, since they could change the script and then your site would break.

writeCapture.js does what you need (full disclosure: I'm the author). It basically rewrites the script tags so that each one captures it's own document.write output and puts it in the correct place. The usage (using jQuery) would be something like:

$(document.body).writeCapture().append('<script type="text/javascript" src="http://3rdparty.com/foo.js"&gt;&lt;/script&gt;');

Here I'm assuming that you want to append to the end of the body. All jQuery selectors and manipulation methods will work with the plugin, so you can inject it anywhere and however you want. It can also be used without jQuery, if that is a problem.

noah 2009-12-29 16:16:06

ansaurus

tags:

views:

answers:

JavaScript - controlling the insertion point for document.write

related questions