10

I'm in a situation where I need to add an advertisement script tag dynamically.

The ad itself is just a simple script tag with the src attribute pointing to the ad server. The actual code which is then ran is a 2-step ordeal:

First, there is a document.write(), like so:

document.write("<iframe id='lctopti2017041855' src='about:blank' style='visibility: hidden;' onload=\"this.style.visibility='visible';\" style='border: 0px; overflow-x: hidden;overflow-y: hidden; width: 100px; height: 400px;' width='100' height='400' scrolling='no' frameborder='0' allowtransparency='true'></iframe>");

Next, there is a:

document.getElementById('lctopti2017041855').src = 'http://www.reallylongurl.com/blah.php?whatever=whatever'

Now, it seems that running document.write() as the page is loading is fine; but I've discovered that if I took the same initial tag and popped it inside of $('#somediv').prepend(), for instance, it would overwrite the entire page.

Is there any way to deal with this? The iframe id and the subsequent ad urls are always dynamic, and generated when the initial script tag requests the javascript from the ad server. If the initial script tag had all the information I needed, I could simply switch out document.write with $('#anywhere').prepend() or something. How can I solve this, short of literally scraping the results of the initial script load and then working with the result?

Is there a way to stop document.write() from overwriting the page but instead only writing where it was called?

dsp_099
  • 5,801
  • 17
  • 72
  • 128
  • 3
    Go to reddit.com or even this site, open the js console and type in 'document.write("hello");' and see what happens. If document.write is present as the page is loading, everything is great - it just writes whatever at that point. If you run it after the page has loaded then it will actually create a whole new page and overwrite everything. – dsp_099 Dec 08 '12 at 06:56

2 Answers2

14

Here is something I have successfully done before

var oldWrite = document.write;
var wHtml="";
document.write=function(str) {
  wHtml+=str;
}
// load adcode
$('#somediv').prepend(wHtml);
// optionally reset
document.write = oldWrite;

This may fail if the adcode loads a script using document.write too. In that case use an iFrame since it will contain all the crap they can do

mplungjan
  • 169,008
  • 28
  • 173
  • 236
  • That's really smart, I've gotta try that. – dsp_099 Dec 08 '12 at 10:14
  • 1
    Wow, I'm in charge of maintaining this project from hell that uses DW all over the place (very bad, I didn't write it). I'm always on the fence between re-doing the whole thing properly myself or just making the quick-fix and sweeping this horrid cesspool of code underneath the rug. You sir, have just saved me 3-4 days from re-doing the entire project... until the next maintenance. – NicolasMoise Jan 14 '14 at 16:27
  • 2
    @NicolasMoise I accept paypal and bitcoins at my website (in my profile) ;) – mplungjan Jan 14 '14 at 17:33
0

If the document is loaded, document.write will flush the whole page. So it should not be put in a function which will be called after document loaded.

If you want more action, i think you can change to some other method.

http://javascript.info/tutorial/document-write some infomation about document.write is shown here. Hope it can be helpful.

aisensiy
  • 1,460
  • 3
  • 26
  • 42