为什么 document.write() 在 Firefox 和 chrome 中表现不同? [英] Why document.write() behaves differently in Firefox and chrome?

查看：41 发布时间：2021/12/18 16:00:51 javascript html google-chrome firefox redirect

本文介绍了为什么 document.write() 在 Firefox 和 chrome 中表现不同?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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

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

我是初学者，已经尽我所能，但我无法解决这个问题，我在网上查看但无法找到解决方案.我该如何解决这个问题?

我的代码:

index.html:

<头><title>我的第一页</title><script type="text/javascript" src="script.js"></script><身体><input type="button" value=" YES " onclick="yes()"/>

<小时>

script.js:

c=5;功能是(){警报(正确")；变量 ans=0;而(ans==0){var x=prompt("你的名字?");var ans=confirm("你的名字是"+x+"对吗?");}document.write('<h1>Welcome '+x+' </h1><p id="show">您将在 3 秒内被重定向</p>');函数更新显示(){document.getElementById('show').innerHTML="<h1>您将在 "+c+" 秒后被重定向</h1>";c=c-1;如果(c<0){document.location='2.html';}别的{setTimeout(function(){ updateShow(); },1000);}}var iAmTimer= setTimeout(function(){ updateShow(); },1000);}

<小时>

2.html:

<身体><h1>欢迎</h1>

<小时>

控制台错误消息

Firefox - 无
Chrome - 无

<小时>

输出:

Firefox(永远):
```
欢迎您将在 3 秒内被重定向
```

<小时>

铬:

欢迎您将在 3 秒内被重定向欢迎<姓名>您将在 2 秒内被重定向欢迎<姓名>您将在 1 秒内被重定向欢迎<姓名>您将在 0 秒后被重定向

感谢任何帮助.

解决方案

你应该只使用 document.write() 在加载文档时动态插入内容.

根据 MDN 的文档:

<块引用>

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

来自document.open():

<块引用>

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

所以，使用 document.write() 文档加载后将覆盖(或清除)您的文档.由于这些原因，使用 document.write() 被认为是一种不好的做法.

使用

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

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

演示

另见 document.write 的替代方案是什么?

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

更新:

来自 DOC 的:><块引用>

此外，自动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

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.

解决方案

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

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

这篇关于为什么 document.write() 在 Firefox 和 chrome 中表现不同?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文

为什么 document.write() 在 Firefox 和 chrome 中表现不同? [英] Why document.write() behaves differently in Firefox and chrome?

问题描述

相关文章

前端开发最新文章

热门教程

热门工具

登录关闭

为什么 document.write() 在 Firefox 和 chrome 中表现不同? [英] Why document.write() behaves differently in Firefox and chrome?

问题描述

相关文章

前端开发最新文章

热门教程

热门工具

登录 关闭

登录关闭