Amazing story document.write

The document.write method is one of the strangest methods. It inserts the HTML code on the page immediately after it. More precisely, right after the <script> , inside which it is located. And only if the document has not yet been completely downloaded. And if there was? Then the page is cleared and replaced with what was specified.

You can insert a line that explicitly breaks the rest of the page:

 document.write('<plaintext>') 

Or you can play Russian roulette:
')

 if (Math.random() > 0.9) document.write('<!--') 

It turns out that the fact that the text is inserted immediately after the <script> tag is important. For example:

 <script> document.write('<script src="jquery.js"></' + 'script>'); alert(jQuery.guid) </script> 

This code will generate an error that the jQuery variable is not declared.
On the other hand:

 <script> document.write('<script src="jquery.js"></' + 'script>'); </script> <script> alert(jQuery.guid) </script> 

And this code will be executed without errors, because the second <script> tag will not be executed until the script loaded from the first tag is fully processed.

Further it becomes more curious. Imagine that there is such a code:

 <script> console.log('a'); document.write('<script src="printC.js"></' + 'script>'); console.log('b'); </script> <script> console.log('d'); </script> 

And the printC.js file contains the following:

 console.log('c') 

This code will output the following to the console:

 a b c d 

This example shows that all the code from the first <script> after document.write was executed right away, but the second tag started being executed only after printC.js completed its work.

It should be remembered. That this method of inserting content only works directly during the loading of the document. What happens if you call document.write after it is already loaded? It would be logical to give an error, or do nothing. Instead, the entire existing page is erased, and the transferred string is displayed in its place:

 setTimeout(function(){ document.write("Oops"); }) 

Is there a normal reason to use document.write ?

I have not heard about this. Apparently, it is used in banner rolls, because it allows you to show a tracking image instead of an AJAX request, if the user logs in to the site through Netscape 2. In the modern world, it is not needed for anything else.

True, sometimes there are wonderful tools that imperceptibly wrap the HTML you pass into document.write calls.

Can I call document.write inside document.write ?

Aha

Like, infinitely many times?

No, 20 times.

Seriously? Twenty?

Yeah .

Google Chrome is undoubtedly a better browser - there you can as many as 21 times.

Did they think of this independently of each other?

The Firefox developers were the first to fix a bug that could potentially drop the browser, and the Webkit developers copied their solution. Rumor has it that IE also has a certain limit, but it is even lower.

Is it possible to break the browser even faster?

 <div id="uniqid"> <script language="JavaScript" type="text/JavaScript"> document.write(">"+document.getElementById('uniqid').innerHTML+"<"); </script> </div> 

(Code taken from ticket )

What other nonsense can you do with document.write ?

Yes, whatever!

For example, you can make a synchronous AJAX request and paste its result directly into the body of the page:

 x = new XMLHttpRequest() x.open('GET', "", false) x.send() document.write(x.responseText); 

Sending the request will block the loading of the main page, and the contents of the response will be inserted as if it was originally located on the loaded page. In this case, an empty string is passed instead of the URL, so the same page will load, and it, in turn, will start loading itself again, and so on to infinity *.

_{* “Endlessly” means 20 times. Or 21. Or even less if you are in IE.}

In general, you can have fun in different ways .

Anything else?

This is not in the current specification (although it was in previous versions), but you can pass several parameters to document.write , for example:

 document.write("", "", "", "", "", ""); 

If the method is useless, why am I reading about it at all?

This is a really good question!

Translator's Note:

Curiously, only the first call to document.write after loading the page, clears its contents. Subsequent calls add text after the first.