javascript document.write in external js file

Question

Working on big, high loaded project I got the problem that already described in billion of topics on forums and blog, but there is no solution that will help in my case. Here is the story.

I have the HTML code of banner, I don't know what is the code. Sometimes it's plain HTML, but sometimes it's <script> tag with document.write inside it with <script> tag that has src to doubleclick network in it.

So we have: script > document.write > script(doubleclick).

doubleclick network, as you may know, use document.write too and most of the time they give flash banners that need to load one more js file.

So after all we have: script > document.write > script(doubleclick) > document.write > script > ...

This works good when you place it in HTML directly. Page rendering 1 part, load banner1, keep rendering page, load banner2, finalizing page rendering.

But right now I need to render page first and only after that load banners. As banner use document.write I need to load it before window.onload event (note: after window.onload document.write will rewrite whole document.)

What I've done:

In the head section I have an banners object(real namespace kind of huge :)), with property scope.

When page rendering and banner code is meet I place the code of the banner into the scope and put <div id="bannerPlaceHolder"+id></div> -- so here I will need to put banner content later on

Page rendered and before </body> tag I put <script>banners.load()</script> banners.load method do this for each item in scope array:

document.write('<div id="codeHolder'+id+'">');
document.write(bannerCode);
document.write('</div>');

And only after this I have window.onload() event that do this:

take all banners codeHolders and node-by-node append it nodes from codeHolder to placeHolder, so in result I have loaded banners after rendering the page and banners are on the right places.

All is perfect except IE, it load any js script that was putted in DOM dynamically in asynchron way, so document.write inside doubleclick scripts append nodes to the end of the document and not in my codeHolder nodes. As usual it's only in IE.

I will be really appreciated to anyone who may know the solution.

Answer 1

You need writeCapture.js (full disclosure: I'm the author.) All bets are off with 3rd party scripts. Today they use document.write to generate some specific HTML, but tomorrow they could change it and any simple hacks based on replacing document.write will need to be updated. writeCapture takes care of that. Your usage would be something like:

$('#bannerPlaceHolder').writeCapture().html('<script type="text/javascript" src="http://doubleclick.net/bannerCode.js"></script>');

The library can handle any arbitrary depth of script tags and does just fine with interspersed HTML. It also has a standalone build if you don't use jQuery.