Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
282 views
in Technique[技术] by (71.8m points)

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

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

  1. Firefox - None
  2. Chrome - None

Output:

  1. Firefox (forever):

    Welcome <name>
    
    You are being redirected in 3 seconds 
    

  1. 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.

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)

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() :)


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界,一个免费开放的程序员编程交流平台!开放,进步,分享!让技术改变生活,让极客改变未来! Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...