且构网

分享程序员开发的那些事...
且构网 - 分享程序员编程开发的那些事

为什么document.write()在Firefox和Chrome中的行为有所不同?

更新时间:2023-12-04 22:29:16

您应该只使用 document.write() 在文档加载时即时插入内容。

根据 MDN的文档
$ b


写入已经加载的文档,而不用调用 document.open() 会自动执行 文档。 open() 调用


document.open()

lockquote
如果目标文件存在,这个方法清除它

因此,使用 document.wri te() 将覆盖(或清除)您的文档。由于这样的原因,使用 document.write()被认为是一个不好的做法使用

  document.body.innerHTML + =' < h1> Welcome'+ x +'< / h1>< p id =show>您正在被重定向3秒钟< / p>; 

而不是将内容隐藏在 HTML 之前将会解决这个问题。



Demo

a>

另见什么是替代document.write?



这是如何工作在铬,对我来说是一个谜,恕我直言 - 它不应该。 b
$ b

更新:

DOC's
$ b


另外,自动 document.open () 调用发生在 document.write()的 在页面加载完成后调用,但W3C规范没有定义。


所以它不再是神秘的,因为没有规范,不同的浏览器以不同的方式实现。还有一个理由要避免 document.write () :)

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.

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