Question

I have an application that uses a mobile ad provider; the way ad provider works is that I make a request on the server side, the provider returns me the mark-up and I include that on my site.

In order to make the load page faster (which is a requirement that I don’t control), I have an AJAX call to my server which then makes the call to the server side, returns the markup and I include the markup on my mobile view.

Most of the time, the markup I receive is a <img> or something similar.

However, when I receive a ad markup with <script> that make another call dynamically to receive the ad, the markup I receive from the dynamically loaded <script> ends up replacing the entire view; leaving with me just the ad.

I have tried a few things around it but haven’t been successful so far. Is there anything I can do make sure the dynamically received markup doesn’t end up replacing the entire page contents?

Answer 1

The problem is probably because the ad uses document.write as it’s output.

document.write is recklessly dependent
on timing. If document.write is called
before the onload event, it appends or
inserts text into the page. If it is
called after onload, it completely
replaces the page, destroying what
came before. – crockford.com

What you can do is to temporarily overwrite the document.write method. It is as simple as that:

// overwrite document.write with a custom function
var old = document.write;
document.write = function ( html ) {
  document.getElementById("target").innerHTML += html;
};

// ad code goes here, calling
// our document.write sandbox
document.write("<div> advertisement </div>"); 

// restore standard document.write
document.write = old;

You can see a little demo here.