Fatal编程技术网

Javascript 记录。写方法问题

javascript html

Javascript 记录。写方法问题,javascript,html,Javascript,Html,我正在试验write方法&onload事件。这是我的密码： <!DOCTYPE html> <html> <head> </head> <body onload="document.write('body loaded!')"> <h1>Hello World!</h1> <img onload="document.write('img loadeld

我正在试验write方法&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”和“hangs”，似乎在无限地加载页面。 我希望浏览器输出“img loadeld”，然后作为body元素准备就绪 “身体负重”，只是正常停止

我的问题是:

  • 为什么会有这样的悬念？为什么img元素上的onload事件会阻止浏览器继续&呈现“body-loaded”
  • 为什么如果我从img元素中删除onload处理程序，那么响应就像预期的那样——“body-loaded” 而且页面没有被阻止
    加载html后，当函数内部使用
    document.write
    时，它会写入newhtml文档。 onload是一个事件处理程序，因此
    =
    img.onload=function（event）{document.write（'img loadeld！'）；}

    它不会阻止页面加载，只会创建新的空白html文档。

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

    创建一个消息容器，比如一个DIV并设置
    innerHTML
    ，不要使用。write（）
    简单地说，在
    文档之后调用
    write（）
    DOM ready会导致它覆盖现有的DOM。
    一切都正常工作（尽管不像您预期的那样），没有任何东西是“挂起”或“阻塞”的然而，这一切发生得如此之快，以至于看起来并不是这样。希望对写入文档的工作原理和事件顺序的解释能帮助您：
    
您的IMG onload事件在文档关闭后触发（已达到文档就绪状态）
    
但是，
    document.write（）
    ，只能输出到打开的文档
    
如果文档已关闭，
    document.write（）
    （）隐式调用
    document.open（）
    （），这将擦除整个文档。调用
    write
    ，然后输出您告诉它的内容。文档将保持打开状态，直到显式关闭（
    document.close（）
    （）），因此“加载微调器”将继续显示
    
那么，正在发生的基本操作流程（如此之快，以至于你没有注意到所有的事情都在发生，事情看起来很糟糕）是：
    

  • 请求页数
    • 

  • 收到页面响应
    • 

  • 文档被打开，内容被解析并放置到位，包括第一个
    文档。write
    （不必调用open，因为文档当前处于打开状态）
    • 

  • 文件关闭
    • 

  • IMG标记的检索完成并触发事件
    • 

  • 事件处理程序调用
    document.write
    • 

  • 隐式重新打开文档（创建新文档，所有内容丢失；显示加载微调器）
    • 

  • document.write（）
    的参数将输出到新文档中
    • 

  • 一切都已完成，文档仍处于打开状态
    • 
应该使用DOM操作技术（
    appendChild（）
    ，写入
    innerHTML
    ，等等），而不是
    document.write
    ，以便在不覆盖所有内容的情况下修改现有内容
    

    好消息是，既然发生了这种情况，您就知道您的映像正在成功加载。正如我之前回避的那样，您只需要找到正确的反应方式。
    谢谢您的详细回答：-）谢谢您的回答：-）1。）所以body onload事件发生在文档关闭之前，因此它是关闭的&没有加载微调器。我说得对吗？那么为什么我要使用这样的代码：
    helloworld！
    第一个警报是“img负载”而不是“车身负载”？？？2.）如果在最后一种情况下（body onload）自动执行事件，为什么在加载图像后必须显式调用document close，而在body onload=“document.write”后我没有这样做？

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