Question

我正在尝试使用写法＆amp; 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”，然后身体元素准备就绪 “身体装载”，并且正常停止。

我的问题：

为什么会这么挂？为什么img元素上的onload事件阻止浏览器继续＆amp;渲染“身体装”？
为什么如果我从img元素中删除onload处理程序，响应就像预期的那样 - “body loaded” 并且页面未被阻止。

Answer 1

一切都正常工作（虽然没有你想象的那样），没有什么是＆＃34;挂＆＃34;或者＆＃34;阻止。＆＃34;然而，这一切都发生得如此之快，以至于没有出现这样的情况。希望对文档编写工作和事件顺序的解释将有助于您：

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

但是，

document.write()只能输出到打开文档。

如果文档已关闭，document.write()（docs）会隐式调用document.open()（docs）来擦除整个文档。您致电write然后输出您告诉它的内容。文档保持打开状态，直到明确关闭（document.close()（docs）），因此＆＃34;加载微调器＆＃34;继续显示。

然后，正在发生的基本操作流程（如此之快，以至于你没有注意到这一切都发生了，事情看起来很糟糕）是：

页面请求
收到的回复
文档打开，内容被解析并放置到位，包括第一个document.write（不必打开，因为文档当前是打开的）
文件关闭
IMG标记的检索完成，事件触发
事件处理程序调用{{1}}
文档（创建新文档，丢失所有内容;显示加载微调器）
您对document.write的论证被输出到新文件
一切都完整，文档仍然打开

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

这里的好新闻是因为发生了这种情况，您确实知道您的图片已成功加载。正如我前面提到的那样，你只需按照正确的方式对其作出反应。

Answer 2

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

Answer 3

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

Answer 4

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

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

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

Answer 5

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

Document.write方法问题

5 个答案: