document.write() 覆盖文档？

Question

这个：

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

在 html 中调用如下：

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

将字符串sup 添加到myDiv div 元素。这正是我想要的。但是，这个：

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 文件。 IE。当我在 Firefox 中运行它时，它只显示字符串 sup（这是页面的全部内容），但页面似乎仍在加载（FF 的加载图标仍然存在动画，显然是无限的）。

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

Answer 1

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

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

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

您可以使用document.open() 打开文档进行写作。您还可以使用document.write() 开始将内容写入文档。最后，您可以使用document.close() 关闭要写入的文档。因为文档总是需要在在你写之前打开，所以调用document.write()总是会导致一个隐含的document.open()。

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

例如，如果你在一个html文件的正文中执行document.write("<p>holla</p>")，浏览器在接收到该html文件后会执行以下操作。

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

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

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

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

Answer 2

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

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

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