Question

In this question, I got the following answer:

Looking at Google’s maps script it’s failing to load the Geocoder module because it’s using document.write to do so, a method that has to be run from a included in the HTML document at parse time, not imported by use of DOM scripting as you’re doing here.

Which is a method that has to be run from a included in the html at pare time? How do I do this?
What is being imported by the use of DOM-scripting? How do I recognize DOM-scripting?

I’m pretty new to javascript and I don’t really understand the reference here.

Answer 1

document.write is an old method that inserts HTML into the page while it is loading, at the place where the script is located. For this reason, it is commonly used in JavaScript “widgets” that can be copy-and-pasted into a web page. However, if the page has finished loading, all it does is start the creation of a new page with that HTML in it.

<div id="foo"> 
    <script type="text/javascript"> 
        document.write("<h1>Main title</h1>") 
    </script> 
</div>

This is in contrast to the functions that jQuery provides or the underlying DOM methods that it uses, which have to be called after the page has loaded:

// The jQuery way
$(document).ready(function() {
    $('#foo').append('<h1>Main title</h1>'); 
});

// The plain JS way
window.onload = function() {
    var h1 = document.createElement('h1');
    h1.appendChild(document.createTextNode('Main title'));
    document.getElementById('foo').appendChild(h1);
};

If there is simply no way to change the widget (e.g. it is served by a third-party), and you have to, for example, load the widgets from jQuery, you could override the document.write and document.writeln functions to do what you want them to just before loading it.

Keep in mind that for this to work correctly when there are multiple widgets on a page, you would have to ensure that the first gadget has completely loaded before you even try to load the second.