Redirect document.write from javascript script

Question

We want to serve ads on our site but the adserver we are in talks with has issues with delivering their advertising fast enough for us.

The issue as I see it is that we are supposed to include a <script src="http://advertiserurl/myadvertkey"></script> where we want to display the ad and it will then download a script and use document.write to insert some html.

Problem is that the call to the advertiser website is slowish and the code returned then downloads another file (the ad) which means the speed of rendering our pages slows while we wait for the request to be filled.

Is there a way to take the output from the document.write call and write this in after the page has loaded?

Basically I want to do this:

<html>
<body>

    <script>
function onLoad() {
    var urlToGetContentFrom = 'http://advertiserurl/myadvertkey';

    //  download js from above url somehow

    var advertHtml = // do something awesome to interprete document.write output
    $('someElement').innerHTML = advertHtml;
}
    </script>

</body>
</html>

Or anything similar that will let me get the output of that file and display it.

we considered caching the content of the calls and serving that but we get a unique link and image served for each request which cancels out doing that. i realise this is maybe a little obsessive but adding an extra .7sec to each request is making each page take twice as long to load. — mjallday, Apr 29 '09 at 07:29

score 6 · Answer 1 · answered Apr 29 '09 at 07:39

6

If I understand correctly, you want to capture document.write to a variable instead of writing it to the document. You can actually do this:

var advertHtml = '';
var oldWrite = document.write;

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

// Ad code here

// Put back the old function
document.write = oldWrite;

// Later...
...innerHTML = advertHtml;

You still have the hit of loading the script file though.

answered Apr 29 '09 at 07:39

Greg

316,276
54
369
333

i don't believe i can do this because i cannot edit the external script that has the document.write in it. – mjallday Apr 29 '09 at 07:54
You don't need to edit the external script - you can put the stuff before and after "// Ad code here" in separate – Greg Apr 29 '09 at 09:17

score 3 · Accepted Answer · answered Apr 29 '09 at 07:35

3

To decouple the main page loading from the ad loading, you can put the ad in its own page in an iframe or, similarly, download the script file with AJAX and execute it whenever it comes down. If the former is not adequate, because of referring URI or whatever, the latter gives you some flexibility: you could use string replacement to rewrite "document.write" to something else, or perhaps temporarily replace it like "document.write = custom_function;".

answered Apr 29 '09 at 07:35

Anonymous

49,213
1
25
19

great idea. i've basically changed to: document.load = function(){ var adArea = $('ad'); adArea.innerHtml = ""; } this seems to work well. thanks – mjallday Apr 29 '09 at 07:55

score 1 · Answer 3 · answered Nov 22 '09 at 21:50

You may be interesed 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.

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

score 0 · Answer 4 · answered Apr 29 '09 at 07:40

0

You'd run into some security issues going cross domain due to the Same Origin Policy. I would look into JSONP if you have access to change the advertising content/service

http://docs.jquery.com/Ajax/jQuery.getJSON#urldatacallback

answered Apr 29 '09 at 07:40

Chad Grant

44,326
9
65
80

Redirect document.write from javascript script

4 Answers4

Linked