JavaScript - controlling the insertion point for [removed]

Question

I would like to create a page that runs a 3rd party script that includes document.write after the DOM was already fully loaded.

My page is not XHTML. My

Answer 1

It is possible to override the document.write method. So you can buffer the strings sent to document.write and output the buffer wherever you like. However changing a script from synchronous to asynchronous can cause errors if not handled correctly. Here's an example:

Simplified document.write replacement

(function() {
    // WARNING: This is just a simplified example
    // to illustrate a problem.
    // Do NOT use this code!

    var buffer = [];
    document.write = function(str) {
        // Every time document.write is called push
        // the data into buffer. document.write can
        // be called from anywhere, so we also need
        // a mechanism for multiple positions if
        // that's needed.
        buffer.push(str);
    };

    function flushBuffer() {
        // Join everything in the buffer to one string and put
        // inside the element we want the output.
        var output = buffer.join('');
        document.getElementById("ad-position-1").innerHTML = output;
    }

    // Inject the thid-party script dynamically and
    // call flushBuffer when the script is loaded
    // (and executed).
    var script = document.createElement("script");
    script.onload = flushBuffer;
    script.src = "http://someadserver.com/example.js";

})();

Content of http://someadserver.com/example.js

var flashAdObject = "";
document.write("
");

// Since we buffer the data the getElementById will fail
var example = document.getElementById("example");
example.innerHTML = flashAdObject; // ReferenceError: example is not defined

I've documented the different problems I've encountered when writing and using my document.write replacement: https://github.com/gregersrygg/crapLoader/wiki/What-to-think-about-when-replacing-document.write

But the danger of using a document.write replacement are all the unknown problems that may arise. Some are not even possible to get around.

document.write("");
adLib.doSomething(); // ReferenceError: adLib is not defined

Luckily I haven't come across the above problem in the wild, but that doesn't guarantee it won't happen ;)

Still want to try it out? Try out crapLoader (mine) or writeCapture:

You should also check out friendly iframes. Basically it creates a same-domain iframe and loads everything there instead of in your document. Unfortunately I haven't found any good libraries for handling this yet.