Why does writing a script to a page destroy the body tag, leaving a white blank page?

Question

I ran into a situation where I'm adding a script dynamically to a page using JavaScript, and ending up with a blank, white page which has it's body tag removed. Below is the code. This code isn't optimal because it adds the script a few times while jQuery is loading up, but I know what the fix is (see comments)... What I don't know is why the page or the browser behaves the way it does.

function LoadingClass () 
{
    this.check = function(iteration) {
        var o = this;
        console.log("Checking...");
        if (typeof jQuery === 'undefined') {
            iteration++;
            console.log("jQuery not found (iteration " + iteration + ")");
            if (iteration > 50) {
                console.error("No jQuery found. Cannot start.");
            } else {        
                // This code seems simple but behaves oddly
                console.log("No jQuery found yet. Let's add the script.");
                document.write('<script id="script_jquery" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>');

                // This is the fix that prevents the script from 
                // being written more than once. No issue with this.
                /*
                if (document.getElementById('script_jquery') === null) {
                    console.log("No jQuery found yet. Let's add the script.");
                    document.write('<script id="script_jquery" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>');
                } else {
                    console.log("No jQuery found yet, but the script exists. Waiting...");
                }
                */
                // Check again
                var t = setTimeout(function(){ o.check(iteration); }, 100);
            }
        } else { // Continue with startup code here...
            console.log("jQuery Loaded. Continue...");
        }
    };
}    
window.whitepageProblem = new LoadingClass();
whitepageProblem.check(0);

When I run this from a simple HTML page in Chrome, I find that:

the check function runs 4 or 5 times (I would expect that)
the page is visible for just a moment (DOM loads while JavaScript is iterating)
the scripts end up being added to the <head> (that's not supposed to happen!)
Everything else in the <head> vanishes (?!)
the <body> tag is nowhere to be seen in the Developer Tools (Elements tab) (?!)
Yet the source HTML looks fine

If anyone would care to test, here's a simple page...

<!doctype html>
<html>
<head>
    <title>Whitepage Test</title>
    <style>
        body { background: #6688ff; }
    </style>
</head>
<body>
    <h1>Whitepage Test</h1>
    <script src="whitepage.js"></script> <!-- Add the js code to this file -->
</body>
</html>

Just to be clear, the question is not how do I fix this (although if you have a better fix than what I have included, I'd love to hear it), but is what is happening here?

An article on why you should avoid document.write() http://stackoverflow.com/questions/802854/why-is-document-write-considered-a-bad-practice — , Sep 29 '14 at 22:24
Thank you. The relevant answer from the duplicate is simply: "You can't use document.write once the document has completed loading. If you do, the browser will open a new document that replaces the current." — Luke, Sep 29 '14 at 22:29
Instead of document.write: `var script = document.createElement('script'); script.id = "script_jquery"; script.src = "yourjQueryURL"; document.body.appendChild(script);` — Luke, Sep 30 '14 at 20:39

score 2 · Accepted Answer · answered Sep 29 '14 at 22:22

2

When you write to the document after the document is initially closed by the browser, the effect is to start all over with a fresh, empty document.

answered Sep 29 '14 at 22:22

Pointy

371,531
55
528
584

Why does writing a script to a page destroy the body tag, leaving a white blank page?

1 Answers1