document.write()覆盖了整个文档？

Question

这是：

function myFunction()
{
    document.write("sup");
}

在HTML中的调用方式:

<div id="myDiv">
    <script>myFunction();</script>
</div>t

在 myDiv div 元素中添加字符串 sup。这正是我想要的。但是，这样写：

function loadFile(uri)
{
    var r = new XMLHttpRequest();
    document.write("trying to open: " + uri);
    r.open('GET', uri, true);
    r.send(null);
    r.onreadystatechange = function()
    {
        if (r.readyState == 4)
        {
            myFunction();
        }
    }
}

function myFunction()
{
    document.write("sup");
}

这样叫：

<div id="myDiv">
    <script>loadFile("filename.txt");</script>
</div>

似乎覆盖了整个HTML文件。即，当我在Firefox中运行它时，它只显示字符串“sup”（这是页面的全部内容），但页面似乎仍在加载（FF的加载图标仍在动画，显然是无限的）。首先，这将仅在本地离线使用，作为一种快速方便的方式来呈现数据（使用html+js和Web浏览器而不是纯文本文件）。我想要的是加载本地文本文件，然后将其中一些内容作为HTML页面的一部分。与我的第一个示例相同，但首先加载文本文件。

- NPS

---

是的，正如您所说，当页面加载后调用时，它会覆盖文档。如果您想操作现有的DOM，请先通过一些基本教程进行学习。https://developer.mozilla.org/en-US/learn/javascript - Blue Skies

Answer 1

问题在于在文档加载后运行document.write时，它会覆盖整个文档。 如果在此之前运行，它不会覆盖。

您想要做的是设置特定元素的innerHtml，例如：

document.getElementById("myDiv").innerHTML="Sup";

- dave

Answer 2

让我们来了解一下浏览器在接收到一个html文件时所做的事情。

1. 打开窗口文档以进行编写。就像打开一个文本文件。
2. 浏览器将内容写入文档。在这个步骤中发生了很多神奇的事情——对象被创建，html被渲染为框。
3. 窗口文档关闭文档。有点像保存文本文件。

现代浏览器还公开了一个文档API，允许您使用JavaScript执行上述任务。

您可以使用document.open()打开要编写的文档。您还可以使用document.write()开始将内容写入文档。最后，您可以使用document.close()关闭编写文档。由于文档总是需要在编写之前打开，因此调用document.write()始终会导致隐式的document.open()。

在html body中插入document.write()调用是一种常用技术，用于动态插入字符串内容到html页面中。

例如，如果您在html文件的body中执行document.write("<p>holla</p>")，浏览器将在接收到html文件时执行以下操作：

1. 打开文档进行编写。
2. 开始将html内容写入文档。
   • JavaScript引擎在遇到document.write()时会执行它，然后将"<p>holla</p>"写入该特定行的文档中，就像这个字符串已经是html文件的一部分一样！由于document.write()是在解析html文件期间调用的，因此它只被解析为页面的一部分。
3. 关闭编写文档。解析完成。

如果您是这样使用document.write()的，那么就不会有任何意外了。相反，您会在html解析完成之后调用document.write()。

所以，你认为应该发生什么？

如我之前所提到的，在写入文档之前，需要打开一个文档以供写入。理论上，我们可以将内容附加到现有内容中或者只是覆盖它。好吧，如果我们将内容附加到现有内容中，我们最终会得到一个无效的html页面，因为新值将出现在关闭标签后面。因此，更明智的行为是覆盖内容，这正是发生的事情。

- linstantnoodles

---

linstantnoodles解释了这个document.write非常好，以至于你可能会被诱惑使用这种技术进行脚本注入，但是不要使用document.write进行脚本注入。 - Eggs