使用document.open（）和document.close（）

Question

所以，我正在阅读有关MSDN here的一篇文章，内容涉及使用JavaScript向网页显示文本的多种方式。但是，我发现最后一个例子相当混乱，因为文章中描述并在IE11中展示的示例的行为与Chrome中显示的行为不匹配。

以下是示例：

<!DOCTYPE html>
<html>
<head>
<meta name="description" content="[StackOverlow document.write() question]">
<script type="text/javascript">
    function ShowTime()
    {
        var dt = new Date();
        document.write(dt.toTimeString());
        // var elem = document.getElementById("divElem");
        // elem.textContent = dt.toTimeString();
        window.setTimeout("ShowTime();", 5000);
    }
</script>
</head>

<body>
<script type="text/javascript">
    ShowTime();
</script>
<div id="myDiv"></div>
</body>
</html>

该代码被描述为仅显示两次时间，间隔为5秒。这对IE11来说是正确的。明确地说，这就是发生的事情：

立即显示时间
等待5秒
显示的时间更新为当前时间

但是，如果我在Chrome中运行该示例，则运行如下：

立即显示时间
等待5秒
显示的时间更新为当前时间
等待5秒
在已显示的内容旁边显示单独的时间戳
无限期地重复步骤4和5 ......

任何人都可以通过解释每个浏览器使用document.write（）和setTimeout（）的机制来详细说明为什么代码的行为方式？

非常感谢任何帮助。提前谢谢！

Answer 1

首先，你不应该使用document.write()。早期它是编写DOM的唯一方法，但今天它只应该被使用......好吧，真的不应该使用它。永远。如果他们弃用并完全删除它，我会很高兴。

每个元素都添加到DOM中，脚本按接收顺序执行（从上到下）。因此首先执行标头中的脚本标记。因为它只有一个功能，所以没有任何执行。它只是将ShowTime函数存储在内存中，以便在其他时间使用。

然后继续加载DOM的其余部分，直到它到达第二个脚本标记。它也会执行它。该标签调用ShowTime，因此指针跳转到ShowTime函数并从上到下执行它（这就是为什么我在myDiv div标签之后移动第二个脚本，在该标签存在之前执行它意味着它还没有被添加到DOM中并且document.getElementById将返回一个空值，这意味着elem.textContent = ...会因错误而停止，抱怨elem不是一个对象而且不包含textContent属性。）

setTimeout延迟执行ONE TIME功能。但是，由于setTimeout在函数内，因此它将基本上是无限循环＆＃34;。一旦函数被调用，它将运行并将时间设置为ID为＃34; myDiv＆＃34;然后将调用setTimeout函数再次调用自身。因此，在5秒后它再次调用自己，然后再设置另一个超时5秒。然后再次执行自己再次设置另一个超时5秒......你看到这里发生的模式。每个浏览器应该没有区别。他们都应该以同样的方式处理这个问题。

所以...使用注释代码应该可以正常工作（并且是写入DOM元素的可接受方式）：

<!DOCTYPE html>
<html>
<head>
<meta name="description" content="[StackOverlow document.write() question]">
<script type="text/javascript">
    function ShowTime()
    {
        var dt = new Date();
        var elem = document.getElementById("myDiv");
        elem.textContent = dt.toTimeString();
        window.setTimeout("ShowTime();", 5000);
    }
</script>
</head>

<body>
<div id="myDiv"></div>
<script type="text/javascript">
    ShowTime();
</script>
</body>
</html>

回到document.write。为什么每个浏览器的行为都不一样？根据{{3}}，document.write()应该仅写入新文档。如果文档已经存在（例如，您有脚本的页面），则应首先执行document.open（），这将清除页面的所有内容并启动一个新的空白文档。为什么Chrome不清楚？我不知道。开发人员可能尚未更新该功能，因为不建议再使用它。我做了一个搜索，并没有提出任何东西，为什么Chrome的行为会有所不同。我在一个网站上对它进行了测试，并且该网站已经为我清除了，所以您可能正在使用可能有错误的旧版Chrome？不幸的是，我无法提供更好的解释，但绝对认为你应该注意警告并避免完全使用document.write。

Answer 2

使用document.open（）和document.close（）

＆＃13;

<!DOCTYPE html>
<html>
<head>
<meta name="description" content="[StackOverlow document.write() question]">
<script type="text/javascript">
    function ShowTime()
    {
        var dt = new Date();
        document.open();
        document.write(dt.toTimeString());
        document.close();
        // var elem = document.getElementById("divElem");
        // elem.textContent = dt.toTimeString();
        window.setTimeout(ShowTime, 5000);
    }
</script>
</head>

<body>
<script type="text/javascript">
    ShowTime();
</script>
<div id="myDiv"></div>
</body>
</html>

＆＃13;

使用document.write（）和setTimeout（）来显示时间

2 个答案:

使用document.open（）和document.close（）