我正在尝试写入方法& onload事件。这里是我的代码：Document.write方法问题

<!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”，然后当正文元素准备就绪 “正文加载”，并正常停止。

我的问题：

为什么会出现这样的挂？为什么img元素上的onload事件阻止浏览器继续渲染“body loaded”&？
为什么如果我从img元素删除onload处理程序的响应是预期的 - “身体加载” 和页面不被阻止。

来源

2012-09-11 Mulligan

感谢您的回答:-) ** 1。）**因此，在文档关闭之前发生body onload事件，因此它已关闭，因此无需加载微调器。我是对的？那么，为什么当我使用这样的代码： '<身体的onload = “警报（ '体装！'）”> \t \t

的Hello World！

\t \t ' 第一个警报是 “IMG loadeld” NOT “体加载” ??? ** 2。）**为什么我必须在加载图像后显式调用文档，而我没有在body onload =“document.write？之后执行该操作？如果事件在最后一种情况下自动执行body onload）？ – Mulligan

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

来源

2012-09-11 18:56:14

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

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

或写函数创建了一个元素，并使用document.body.appendChild(elem)，在这种情况下，可以用任何块元素

来源

2012-09-11 18:56:34

创建消息容器，更换document.body诸如DIV并设置innerHTML，不使用。写（）

来源

2012-09-11 18:56:36

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

来源

2012-09-11 18:56:42

感谢您的详细回答:-) – Mulligan

一切工作正常（虽然不是你所期望的），没有什么是“挂起”或“阻塞”。然而，这一切发生得如此之快，以至于它并不是如此。希望解释写入文档和事件顺序将有助于您：

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

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

如果文件已经关闭，document.write()（docs）隐式调用document.open()（docs），这湿巾整个文档。您拨打write然后输出您告诉它的内容。文档保持打开状态直至明确关闭（document.close()（docs）），因此“加载微调器”将继续显示。

操作，然后的基本流程，它正在发生（如此之快，你没有注意到这一切发生的事情，事情看起来破）是：

页面请求作出收到
页面响应
文档被打开，内容被解析并投入到位，包括第一document.write（不必调用打开，因为文件是当前已打开）
文档关闭
IMG标记的检索完成并且事件触发
事件处理程序调用document.write
文档被隐式重新打开（新文档已创建，所有内容都丢失;装载微调显示）
您的参数document.write()输出到新文档
一切都完成后，文件仍然是开放的

DOM操作技术（appendChild()，书面方式向innerHTML等），应改为使用document.write为了修改现有内容而不覆盖所有内容。

该好这里的消息是，既然发生这种情况，你确实知道你的图像加载成功。正如我前面提到的那样，你只需要找出正确的方法来应对它。

来源

2012-09-11 18:58:47 JAAulde

Document.write方法问题

的Hello World！

回答

相关问题