Why using document.write() in javascript is a bad habit. With test cases.
A.E.Veltstra
2007-09-13, 2014-02-11
I will present 2 test cases which try to use unobtrusive javascript to inject a foreign javascript (such as hosted by advertisement and statistics services). Injecting the script itself is no problem (1st test case). However, if the foreign javascript contains document.write() statements, some current browsers go awry (2nd test case).
The problem lies in a combination of factors, one of which is the content mime type (application/xhtml+xml or text/html) and another is the way the document.write() statement is being abused.
Hopefully these test cases will show why authors should refactor their code to remove document.write() and replace it with methods like document.appendChild().
Because content mime type is involved, the tester page can be opened in 2 modes:
The tester page will describe both test cases and let you control when each test is run. Your browser will need to have javascript activated for these tests.
The problem lies in a combination of factors, one of which is the content mime type (application/xhtml+xml or text/html) and another is the way the document.write() statement is being abused.
Hopefully these test cases will show why authors should refactor their code to remove document.write() and replace it with methods like document.appendChild().
Because content mime type is involved, the tester page can be opened in 2 modes:
The tester page will describe both test cases and let you control when each test is run. Your browser will need to have javascript activated for these tests.
Test Results
Tested on MS Windows 2003 Server and XP Professional
| Content delivered as text/html instead of application/xhtml+xml, distinction made by querying HTTP_ACCEPT header. | |||
|---|---|---|---|
| Browser | Test case 1 | Test case 2 as application/xhtml+xml | Test case 2 as text/html |
| Safari 3 Beta | Fails * | Succeeds: shows nothing, but may mistakenly assume javascript is disabled ** | Fails: overwrites current document |
| Opera 10.5 Pre-Alpha | Succeeds | Fails: overwrites current document | Fails: overwrites current document |
| Opera 9.5 Alpha | Succeeds | Succeeds: shows nothing | Fails: shows nothing |
| Opera 9.23 | Succeeds | Succeeds: shows nothing, but may mistakenly assume javascript is disabled | Fails: shows nothing |
| K-Meleon 1.02 | Succeeds | Succeeds: shows nothing | Fails: overwrites current document |
| Internet Explorer 7 | Succeeds | Not applicable | Fails: shows nothing and may get stuck in endless loop |
| Internet Explorer 6 | Succeeds | Not applicable | Fails: shows nothing |
| Firefox 3 Alpha | Succeeds | Succeeds: shows nothing | Fails: shows nothing |
| Firefox 2.0.0.6 | Succeeds | Succeeds: shows nothing | Fails: overwrites current document |
| * | Succeeds when content delivered as text/html instead of application/xhtml+xml. | ||
| ** | Script support recognised correctly when content delivered as text/html. | ||
Need problem solving?
Talk to me. Let's meet for coffee or over lunch. Mail me at “omegajunior at protonmail dot com”.