javascript - document.write 错误?

IT技术 javascript function window onload
2021-03-20 08:57:17

考虑剧本。。

<html>
<head>
   <script type="text/javascript">
        document.write('TEST');
   </script>
</head>

<body>
    Some body content ...
</body>

</html>

这工作正常,并且“测试”这个词被添加到 <body>

但当

<script type="text/javascript">
    window.onload = function(){
        document.write('TEST');
    }
</script>

使用,然后正文内容完全替换为单词“TEST”,即删除旧正文内容,仅添加单词“TEST”。

这仅document.writewindow.onload函数调用时发生

我在 chrome 中试过这个。我有什么错误吗?有什么建议 ?

4个回答

document.write()如果在文档完成解析并关闭后使用它,则不稳定。该行为是不可预测的跨浏览器,您根本不应该使用它。使用innerHTMLcreateElement/createTextNode代替操作 DOM

Mozilla 文档

写入已加载的文档而不调用 document.open() 将自动执行 document.open 调用。一旦你写完,建议调用document.close(),告诉浏览器完成页面加载。您编写的文本被解析为文档的结构模型。在上面的例子中, h1 元素成为文档中的一个节点。

如果 document.write() 调用直接嵌入在 HTML 代码中,则它不会调用 document.open()。

等效的 DOM 代码是:

window.onload = function(){
    var tNode = document.createTextNode("TEST");
    document.body.appendChild(tNode);
}
  1. 在第一种情况下,单词没有写在正文中..它写在头部
  2. 第一个有效,因为该文档仍处于打开状态以供写入..一旦完成(加载 DOM)该文档将关闭,并通过尝试写入来替换它 ..

当文档完全加载时,任何进一步的调用都document.write()将覆盖文档内容。您必须document.close()在调用之前使用document.write()以避免覆盖。

首先创建一个元素,例如一个 div,然后通过window.onload事件向 div 添加内容

document.write('<div id="afterpostcontent"><\/div>');
window.onload = function()
{
    document.getElementById('afterpostcontent').innerHTML = '<span>TEST<\/span>';
}

您可以使用此内容创建一个外部 JavaScript 文件,然后在任何地方调用它,例如:

<script src="afterpostcontentcode.js"></script>