21

这个：

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

在 html 中调用，如：

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

将字符串添加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");
}

像这样调用：

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

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

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

4

2 回答 2

29

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

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

document.getElementById("myDiv").innerHTML="Sup";
于 2013-11-12T23:14:03.433 回答
25

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

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

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

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

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

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

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

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

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

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

于 2014-05-21T15:23:30.250 回答