JS window.onload用法与文档
[英]JS window.onload Usage Vs Document
问题描述
window.onload from my reading sounds like it is loosely interchangeable with document.onload but my experience has shown this is incorrect. 
window.onload从我的阅读听起来像是可以与document.onload松散地互换，但我的经验表明这是不正确的。 I've inherited a JS script and I'm not sure how to correct it. 我继承了一个JS脚本，我不知道如何纠正它。 I want the JS to execute once the DOM has loaded, not once all resources have been loaded. 我想要在DOM加载后执行JS，而不是在加载所有资源之后执行。 How can I do this? 我怎样才能做到这一点？
Currently I have: 目前我有：
window.onload = initDropMenu;
I've tried: 我试过了：
document.onload = initDropMenu;
which just results in the menu not loading. 这只会导致菜单无法加载。 I've also tried removing the line altogether from the JS and just having the DOM execute it via: 我也尝试从JS中完全删除该行，并让DOM通过以下方式执行：
<body onload="initDropMenu()">
that also resulted in no menu, and in no errors in the console. 这也导致没有菜单，并且在控制台中没有错误。 My JS knowledge is limited, what am I missing here? 我的JS知识有限，我在这里缺少什么？
1 个解决方案
解决方案1
7 已采纳 2018-03-10 15:37:22
Load Event on window: 在窗口加载事件：
The load event fires at the end of the document loading process.
[source: developer.mozilla.org ]
<script>
window.onload = function(){ init(); };
</script>
Load Event on HTML Elements: 在HTML元素上加载事件：
The
loadevent is fired when a resource and its dependent resources have finished loading.load事件。
[source: developer.mozilla.org ]
<!-- When the image is loaded completely -->
<img onload="image_loaded()" src="w3javascript.gif">
<!-- When the frame is loaded completely (including all resources) -->
<iframe onload="frame_loaded()" src="about.html">
<!-- When body loaded completely (including all resources, images and iframes) -->
<body onload="init()">
Many forums even some answers in this site may mislead you, but the load event on body element is not only just equivalent to load event on window, it is the exact same event . 许多论坛甚至在这个网站上的一些答案可能会误导你，但是body元素上的load事件不仅仅等同于窗口上的 load事件，它是完全相同的事件 。 The following quote clarifies it. 以下引用说明了这一点。
For historical reasons, some attributes/properties on the
<body>and<frameset>elements actually set event handlers on their parent Window object.<body>和<frameset>元素上的某些属性/属性实际上在其父Window对象上设置了事件处理程序。 (The HTML specification names these: onblur, onerror, onfocus, onload, onscroll.)
[source: developer.mozilla.org ]
The DOMContentLoaded Event: DOMContentLoaded事件：
What developers should use is DOMContentLoaded event on document. 开发人员应该使用的是文档上的DOMContentLoaded事件。 It fires when the html has loaded and parsed completely. 它在html加载并完全解析时触发。
document.addEventListener("DOMContentLoaded", function(event) {
alert("Document is ready");
});
The DOMContentLoaded event is fired when the initial HTML document has been completely loaded and parsed, without waiting for stylesheets, images, and subframes to finish loading.
[source: developer.mozilla.org ]
Perhaps this is the only answer regarding this topic that has proper References 也许这是关于这个主题的唯一答案，它有适当的参考资料
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.