Question

My JavaScript (say File 1) needs to fetch another JS file (say File 2) from my server and have it finish executing before the DOM is done rendering. File 2 is actually an ad script (e.g. AdSense) which uses document.write. I have noticed that if I fetch File 2 by creating a new script tag from within File 1 and appending it to the head node of the DOM (using DOM manipulation methods), the ad renders correctly in firefox but not in IE

Research shows that scripts that appended to the DOM dynamically in this manner may run AFTER the DOM has already rendered, in which case document.write overwrites the entire page. What are my options? I can think of these…. Which one of these is guaranteed to let File 2 manipulate the DOM before it is done rendering?

1) Document.write the script tag for File 2 from within File 1
2) Xmlhttp synchronous call (not sure if this blocks the DOM from rendering)

Help 🙂

Answer 1

Synchronous calls do block the DOM from rendering.

If you want not to block, then you can do an asynchronous call.

I would use document.write() because it executes the code then and there. not after anything is loaded.