为什么 document.write() 在 Firefox 和 chrome 中的行为不同？答案

【问题标题】：Why document.write() behaves differently in Firefox and chrome?为什么 document.write() 在 Firefox 和 chrome 中的行为不同？
【发布时间】：2014-08-20 06:23:55
【问题描述】：

我正在制作一个简单的重定向脚本，它将在 5 秒后将用户重定向到 2.html。

当我在 Chrome 上测试脚本并且它可以工作时！，但在最新的 Firefox 中，它并没有减少秒数并挂起。

我是初学者，已经尽我所能，但我无法解决这个问题，我上网查了一下，但无法找到解决方案。我该如何解决这个问题？

我的代码：

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>

控制台错误消息

Firefox - 无
铬 - 无

输出：

火狐（永远）：

Welcome <name>

You are being redirected in 3 seconds

铬：

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

感谢任何帮助。

【问题讨论】：

@P5Coder 您使用哪个版本？
你添加了吗Jquery library??
@AsheshKumar: 12.0.1
@Prashant 代码没有使用 Jquery 库。他写道，它可以在 Chrome 中运行。

标签： javascript html google-chrome firefox redirect

【解决方案1】：

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

根据MDN's doc：

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

来自document.open()：

如果目标中存在文档，则此方法将其清除

因此，在加载文档后使用document.write() 将覆盖（或清除）您的文档。由于这些原因，using document.write() is considered a bad practice。

使用

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

相反，或者事先将内容隐藏在 HTML 中将解决问题。

Demo

另见What are alternatives to document.write?

这是如何在 chrome 中工作的，对我来说是个谜，恕我直言 - 它不应该。

更新：

来自DOC's：

此外，当页面加载后调用 document.write() 时，会发生自动 document.open() 调用，但这在 W3C 规范中没有定义。

所以它不再神秘，因为没有规范，不同的浏览器实现它的方式不同。避免document.write() 的另一个原因:)

【讨论】：

您能否为document.write() 提出一些替代方案，我知道我可以在网上找到它们，但我知道您是专家。 :)
嗨，document.write() 是document.write()，没有确切的替代方案，但关键是 - 它在实际场景中很少适用。您可以使用innerHTML、appendChild(elm) 等属性来完成您想要做的事情。使用哪种DOM 操作方法取决于您实际想要做什么......
第一句话应该是“你应该是”还是“你应该是”？因为我很确定你的意思是后者。它现在读取第一个。
@Mike'Pomax'Kamermans 它是 “您应该使用 document.write() 在加载文档时动态插入内容。”。这是你应该是。文件加载后使用并不理想。
啊，对。 “你应该只是 [...]”可能会让这一点更加明显。

【解决方案2】：

你在函数中使用函数。这对我有用

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);
                 }

    }

【讨论】：

它在 Firefox (v 30) 上不起作用，而且这在 Chrome 上也很垃圾。