Document.write方法问题 [英] Document.write method questions
问题描述
我正在尝试使用写法& onload事件。这是我的代码：
I'm experimenting with write method & onload event. Here is my code:
<!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元素准备就绪时，
正在加载并且正常停止。
If i run this in browser it outputs "img loadeld" and just "hangs", seems to be loading the page infinitely. I expected the browser outputs "img loadeld" and then as the body element is ready "body loaded" and just stops as normally.
我的问题：
- 为什么会有这样的挂起？为什么img元素上的onload事件阻止浏览器继续&渲染body loaded？
- 为什么如果我从img元素中删除onload处理程序，响应就像预期的那样 - body loaded
并且页面没有被阻止。
推荐答案
一切正常（虽然没有你想象的那样），没有什么是悬挂的 或封锁。然而，这一切都发生得如此之快，以至于它并没有出现。希望对文档编写工作和事件顺序的解释将对您有所帮助：
Everything is working correctly (though not as you expected), and nothing is "hanging" or "blocking." It's all happening so fast, however, that it does not appear as such. Hopefully an explanation of the workings of writing to the document and the order of events will assist you:
文档关闭后，您的IMG onload事件会触发（文档准备好了已达到）。
Your IMG onload event fires after the document has been closed (document ready has been reached).
document.write（）但是，只能输出到 open document。
document.write(), however, can only output to an open document.
如果文档已关闭， document.write（）（ docs ）隐式调用 document.open（）（ docs ） 。你打电话给写然后输出你告诉它的内容。文档保持打开状态，直到明确关闭（ document.close（）（ docs ）），因此loading spinner继续显示。
If a document has been closed, document.write() (docs) implicitly calls document.open() (docs) which wipes the entire document. Your call to write then outputs what you told it to. The document remains open until it is explicitly closed (document.close() (docs)), so the "loading spinner" continues to show.
基本的操作流程然后，正在发生的事情（如此之快，以至于你没有注意到这一切都发生了，事情看起来很糟糕）是：
The basic flow of operations, then, which is taking place (so quickly that you don't notice it all happening and things look broken) is:
- 页面请求已经
- 收到的页面回复
- 文档打开，内容被解析并放置到位，包括第一个
document.write（不必打开，因为文档当前已打开） - 文档关闭
- IMG标记的检索完成并且事件触发
- 事件处理程序调用
document.write - 文档隐式重新打开（创建新文档，丢失所有内容;显示加载微调器）
- 输出
document.write（）的参数进入新文件 - 一切都已完成，文档仍然打开
- page request made
- page response received
- document is opened, content is parsed and put into place, including the first
document.write(does not have to call open because document is currently open) - document closes
- Retrieval for the IMG tag completes and the event fires
- event handler calls
document.write - document is implicitly re-opened (new doc created, all content lost; loading spinner displayed)
- your argument to
document.write()is outputted into the new document - everything is complete, document is still open
DOM操作技术（应使用 appendChild（），写入 innerHTML 等）而不是 document.write 为了修改现有内容而不覆盖所有内容。
DOM manipulation techniques (appendChild(), writting to innerHTML, etc) should be used Instead of document.write in order to modify existing content without overwriting everything.
好新闻就是因为这种情况正在发生，你知道你的图像加载成功。正如我早些时候所说的那样，你只需要以正确的方式对它作出反应。
The good news in this is that since this is happening, you do know that your image is loading successfully. You just gotta work out the right way to react to it as I eluded to earlier.
这篇关于Document.write方法问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
