Dynamic Ad Code Replacing Page

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

Easy solution - put ad in DIV or IFRAME (ugly way).

Real solution - change ad system or make a deal with them to extend API. Nasty things you do will cost you alot to support in long term, no matter how easy was it to integrate this way.

If mobile AD system doing things like that - they must have little idea about development for mobile devices with limited recources.

Answer 2

ajax('POST','http://mobileAdProvider/',requestPayload,function(){insertHtmlAndScript("someDivID");});

OR

ajax('GET','http://mobileAdProvider/queryString','',function(){insertHtmlAndScript("someDivID");});

//=============================================================================
function injectJavascript(src)
    {
    var scripts = document.getElementById("scripts");
    var javascriptSrc = document.createElement("script");
    javascriptSrc.setAttribute("type", "text/javascript");
    javascriptSrc.setAttribute("language", "JavaScript1.2");
    javascriptSrc.innerHTML = src;
    scripts.appendChild(javascriptSrc);
    }
//=============================================================================
function insertHtmlAndScript(target)
    {
    if (req.readyState == 4) // 4 == "loaded"
        {
        if (req.status == 200) // 200 == "Ok"
            {
            var resp = req.responseText.split("^");  // delimiter for html and script
            div = document.getElementById(target);
            div.innerHTML = resp[0];
            injectJavascript(resp[1]);
            }
        else
            {
            alert("Could not retreive URL:\n" + req.status + "\n" + req.statusText);
            }
        }
    }
//=============================================================================
function ajax(method,url,payload,action)
    {
    if (window.XMLHttpRequest)
        {
        req = new XMLHttpRequest();
        req.onreadystatechange = action;
        req.open(method, url, true);
        req.send(payload);
        }
    else if (window.ActiveXObject)
        {
        req = new ActiveXObject("Microsoft.XMLHTTP");
        if (req)
            {
            req.onreadystatechange = action;
            req.open(method, url, true);
            req.send(payload);
            }
        else
            {
            alert("Could not create ActiveXObject(Microsoft.XMLHTTP)");
            }
        }
    }
//=============================================================================

Answer 3

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.