文档.编写方法问题

Document.write method questions

本文关键字：问题 方法 文档      更新时间：2023-09-26

我正在试验写方法&onload事件。这是我的代码：

<!DOCTYPE html>
<html>
    <head>
    </head>
    <body onload="document.write('body loaded!')">
        <h1>Hello World!</h1>
        <img onload="document.write('img loadeld!')" src="smiley.gif" alt="Smiley face" width="42" height="42" />
    </body>
</html>

如果我在浏览器中运行这个，它会输出"img loadeld"，而只是"挂起"，似乎是在无限加载页面。我希望浏览器输出"img loadeld"，然后当body元素准备好时"车身已加载"，并正常停止。

我的问题：

  1. 为什么会有这样的问题？为什么img元素上的onload事件阻止浏览器继续&渲染"实体加载"
  2. 为什么如果我从img元素中删除onload处理程序，那么响应将如预期的那样——"body loaded"并且该页面未被阻止

简单地说，在DOM就绪后调用document.write()会导致它覆盖现有的DOM。

一切都在正常工作（尽管并不像你预期的那样），没有什么是"挂起"或"阻塞"。然而，这一切发生得太快了，以至于看起来并不是这样。希望对写入文档的工作原理和事件顺序的解释能对您有所帮助：

您的IMG onload事件在文档关闭后触发（已到达文档就绪状态）。

但是，document.write()只能输出到打开的文档。

如果一个文档已经关闭，document.write()（docs）会隐式调用document.open()（documents），它会擦除整个文档。然后，您对write的调用会输出您告诉它的内容。文档在显式关闭之前保持打开状态（document.close()（docs）），因此"加载微调器"继续显示。

因此，正在进行的基本操作流程（如此之快，以至于你不会注意到一切都在发生，事情看起来也很糟糕）是：

  1. 发出页面请求
  2. 收到页面响应
  3. 文档被打开，内容被解析并放置到位，包括第一个document.write（不必调用open，因为文档当前处于打开状态）
  4. 文档关闭
  5. IMG标记检索完成，事件启动
  6. 事件处理程序调用document.write
  7. 文档被隐式地重新打开（新建文档，所有内容丢失；显示加载微调器）
  8. 您对document.write()的自变量已输出到新文档中
  9. 所有内容都已完成，文档仍处于打开状态

应该使用DOM操作技术（appendChild()、写入innerHTML等）而不是document.write，以便在不覆盖所有内容的情况下修改现有内容。

好的消息是，既然发生了这种情况，你就知道你的图像加载成功了。你只需要找到正确的反应方式，就像我之前逃避的那样。

这是因为document.write()清除整个文档，然后将参数写入页面，尝试document.writeln('Img loaded');附加到正文，但要坚持真正想要的内容：

<img onload="document.body.innerHTML += '<h1>Loaded</h1>'"'

或者编写一个创建元素并使用document.body.appendChild(elem)的函数，在这种情况下，您可以将document.body替换为任何块元素

创建一个消息容器，如div并设置innerHTML，不要使用.write（）

加载html后在函数内部使用document.write时，它会写入新的html文档。onload是一个事件处理程序，因此<img onload="document.write('img loadeld!')"/>=img.onload = function(event){document.write('img loadeld!');}
它不阻止页面加载，只是创建新的空白html文档。

相关文章：