document.write() 覆盖文档?

IT技术 javascript html xmlhttprequest document.write
2021-01-24 15:48:31

这:

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

在 html 中调用,如:

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

supmyDivdiv 元素添加一个字符串这正是我想要的。然而,这:

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 页面的一部分。与我的第一个示例相同,但首先加载文本文件。

2个回答

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

您要做的是设置特定元素的innerHtml,例如:

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

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

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

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

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

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

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

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

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

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

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

linstantnoodles 对这个 document.write 的解释非常好,以至于您可能会对这种脚本注入技术感兴趣,但不要使用 document.write 进行脚本注入
2021-04-04 15:48:31