Html document.write() 覆盖文档？

document.write() overwriting the document?

提问by NPS

This:

这个：

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

called in html like:

在 html 中调用，如：

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

adds a string supto the myDivdiv element. Which is what I want, exactly. However, this:

sup向myDivdiv 元素添加一个字符串。这正是我想要的。然而，这：

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

called like this:

像这样调用：

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

seems to be overwriting my whole html file. I.e. when I run it in Firefox it shows me only the string sup(that's the whole content of the page) but the page seems to be still loading (the loading icon of FF is still there animating, apparently infinitely).

似乎覆盖了我的整个 html 文件。即，当我在 Firefox 中运行它时，它只显示字符串sup（这是页面的全部内容），但页面似乎仍在加载（FF 的加载图标仍在动画中，显然是无限的）。

First of all, this is going to be used only locally, offline, as a fast and handy way of presenting data (using html+js and web browser instead of plaing text file). What I want is to load a local text file and then put some of its content as a part of the html page. The same as in my first example but with loading the text file first.

首先，这将仅在本地、离线使用，作为一种快速方便的数据呈现方式（使用 html+js 和 Web 浏览器而不是纯文本文件）。我想要的是加载一个本地文本文件，然后将其中的一些内容作为 html 页面的一部分。与我的第一个示例相同，但首先加载文本文件。

回答by dave

The issue is that when you run document.write after the document has loaded, it overwrites the entire document. If it is run before that, it does not overwrite it.

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

What you want to do is set the innerHtml of a specific element, something like:

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

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

回答by linstantnoodles

Lets go over what a browser does when it receives an html file.

让我们来看看浏览器在收到 html 文件时会做什么。

1. The window document is opened for writing. Imagine opening a text file.
2. Browser writes the contents to the document. A lot of magic happens in this step - objects get created and html rendered as boxes.
3. The window document closes the document. Kind of like saving the text file.

1. 打开窗口文档进行写入。想象一下打开一个文本文件。
2. 浏览器将内容写入文档。这一步发生了很多神奇的事情 - 对象被创建并且 html 呈现为框。
3. 窗口文档关闭文档。有点像保存文本文件。

Now, modern browsers also expose a document API that allow you to do exactly those tasks using javascript.

现在，现代浏览器还公开了一个文档 API，允许您使用 JavaScript 完成这些任务。

You can open a document for writing using document.open(). You can also start writing content to the document using document.write(). Finally, you can close the document for writing using document.close(). Since the document always needs to be opened for writing beforeyou write, calling document.write()always results in an implicit document.open().

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

Interspersing document.write()calls throughout an html body is a commonly used technique used to insert string contents dynamically into an html page.

document.write()在整个 html 正文中散布调用是一种常用的技术，用于将字符串内容动态插入到 html 页面中。

For example, if you execute document.write("<p>holla</p>")in the body of an html file, the browser will do the following upon receiving the html file.

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

1. Open the document for writing.
2. Start writing the html contents to the document.
   • JavaScript engine will execute document.write()when it encounters it and then write "<p>holla</p>"into that specific line in the document, just as if the string was already part of the html file! Since document.write()is called duringthe parsing of an html file, it just gets parsed as part of the page.
3. Close the document for writing. Parsing complete.

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

If that's how you use document.write(), there would have been no surprise. Instead, you call document.write()afterthe html is parsed.

如果这就是您使用的方式document.write()，那就不足为奇了。相反，您document.write()在解析 html后调用。

So what do you think should happen?

那么你认为应该发生什么？

As I mentioned before, a document needs to be opened for writing before it is written to. In theory, we could either append to the existing content or just overwrite it. Well, if we append to the content, we'll end up with an invalid html pagebecause the new values will appear after the closing tags. So the more sensible behavior is to overwrite the content and that's exactly what happens.

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