Why document.write() behaves differently in Firefox and chrome?

Question

I am making a simple Redirect script that will redirect users to 2.html after 5 seconds.

When I tested the script on Chrome and it works!, But in latest Firefox but it doesn't decrease seconds and hangs.

I am a beginner and have tried my best out of knowledge but I am unable to solve this, I looked online but was unable to find a solution. How can I solve this?

My code:

index.html:

<html>
  <head>
    <title>My First Page</title>
    <script type="text/javascript" src="script.js"></script>
  </head>

  <body>

        <input type="button" value=" YES " onclick="yes()" />
  </body>
</html>

script.js:

c=5;
function yes() {
    alert("Right");
    var ans=0;
    while(ans==0){
        var x=prompt("Your Name?");
        var ans=confirm("Your Name is "+x+" right?");
    }
    document.write('<h1>Welcome '+x+' </h1><p id="show">You are being redirected in 3 seconds</p>');
    function updateShow(){
            document.getElementById('show').innerHTML="<h1>You are being redirected in "+c+"     seconds</h1>";
            c=c-1;
            if(c<0){
                document.location='2.html';
            }
            else{
                 setTimeout(function(){ updateShow(); },1000);
                 }

    }
    var iAmTimer= setTimeout(function(){ updateShow(); },1000);
}

2.html:

<html>
  <body>
    <h1>Welcome</h1>
  </body>
</html>

Console Error Messages

Firefox - None
Chrome - None

Output:

Firefox (forever):

Welcome <name>

You are being redirected in 3 seconds

Chrome:

Welcome <name>

You are being redirected in 3 seconds

Welcome <name>

You are being redirected in 2 seconds

Welcome <name>

You are being redirected in 1 seconds

Welcome <name>

You are being redirected in 0 seconds

Any help is appreciated.

@Prashant The code does not use Jquery library. And he wrote that it works in Chrome. — Ganesh Jadhav, Aug 20 '14 at 06:36

score 4 · Accepted Answer · edited May 23 '17 at 12:05

4

You should only be using document.write() to insert content on the fly while document is being loaded.

According to MDN's doc:

Writing to a document that has already loaded without calling document.open() will automatically perform a document.open() call

And from document.open():

If a document exists in the target, this method clears it

So, Using document.write() after the document is loaded will overwrite (or clear) your document. For such reasons, using document.write() is considered a bad practice.

Using

document.body.innerHTML+= '<h1>Welcome ' + x + ' </h1><p id="show">You are being redirected in 3 seconds</p>';

instead or having the content hidden in HTML before hand will fix the issue.

Demo

See also What are alternatives to document.write?

How this works in chrome, is a mystery to me, IMHO - it shouldn't.

Update:

From DOC's:

Also, an automatic document.open() call happens when document.write() is called after the page has loaded, but that's not defined in the W3C specification.

So it is no more mystery, since there is no spec, different browsers implemented it differently. One more reason to avoid document.write() :)

edited May 23 '17 at 12:05

Community

1
1

answered Aug 20 '14 at 06:40

T J

40,740
11
73
131

Can you please suggest some alternative for `document.write()` , I know i can find them On web but I know you are expert. :) – Ashesh Kumar Aug 20 '14 at 15:19
Hi, `document.write()` is `document.write()`, there is no exact alternative for it, But the point is - It is rarely applicable in practical scenarios. What you're trying to do can be done using the `innerHTML`, property `appendChild(elm)` etc. Which `DOM` manipulation method to use depends on what you actually wants to do... – T J Aug 20 '14 at 15:34
is the very first sentence supposed to be "you *should* be" or "you *shouldn't* be"? Because I'm pretty sure you mean the latter. It reads the first right now. – Mike 'Pomax' Kamermans Nov 30 '14 at 04:13
@Mike'Pomax'Kamermans it is *"You should be using document.write() to insert content **on the fly while document is being loaded**."*. It is *you should be*. It is not ideal to use it after document is loaded. – T J Nov 30 '14 at 06:52
ah, right. A "you should only be [...]" would probably make that more obvious. – Mike 'Pomax' Kamermans Nov 30 '14 at 17:01

score -1 · Answer 2 · answered Aug 20 '14 at 06:42

you use function in function. this is works for me

c=5;
function yes() {
    alert("Right");
    var ans=0;
    while(ans==0){
        var x=prompt("Your Name?");
        var ans=confirm("Your Name is "+x+" right?");
    }
    document.write('<h1>Welcome '+x+' </h1><p id="show">You are being redirected in 3 seconds</p>');
   updateShow();
    var iAmTimer= setTimeout(function(){ updateShow(); },1000);
} 

 function updateShow(){
            document.getElementById('show').innerHTML="<h1>You are being redirected in "+c+"     seconds</h1>";
            c=c-1;
            if(c<0){
                document.location='2.html';
            }
            else{
                 setTimeout(function(){ updateShow(); },1000);
                 }

    }

It doesn't work on Firefox (v 30) and also this works rubbish on Chrome. — Ashesh Kumar, Aug 20 '14 at 06:46

Why document.write() behaves differently in Firefox and chrome?

2 Answers2

Linked