两个具有window.onload = function()的JS文件发生了冲突
两个具有window.onload = function()的JS文件发生了冲突
我有一个用于打开和关闭侧边菜单的脚本,它使用了HTML内置的事件处理程序。然后我读到说内置的事件处理程序已经过时了。所以我改成了纯JS版本。
我自己编写了一个事件处理程序,本应该可以工作的,但却返回了一个错误:Uncaught TypeError: Cannot set property 'onclick' of null。
然后我在这里读到,也许我应该在JS中添加:
window.onload = function(){ // your code };
我添加了这个函数后,它可以工作了。
但是当我添加了另一个使用相同window.onload
的JS代码来实现手风琴效果后,它突然停止工作,因为它不希望在没有函数或者不在
中时工作。
我对JS还是新手。你能帮帮我吗?有没有可能让这两个JS代码在没有window.onload
的情况下工作,并且保持它们都在中?
问题:两个具有window.onload = function()
的JS文件冲突的原因以及解决方法
当你使用window.onload
时,你会注意到它只能容纳一个事件处理程序。当你分配一个新的处理程序时,任何现有的处理程序都会被覆盖。
相反,使用addEventListener()
,如其名称所示,当调用时,会添加一个监听器。
所以,不要使用:
window.onload = function() { ... };
而是使用:
window.addEventListener('load', function() { ... });
请注意,load
事件可能不是你的情况下最佳的生命周期钩子。load
在DOMContentLoaded
之后触发,并且load
会等待所有外部资源(如图像、样式表、字体等)加载完成。
更常见的情况是确保等待直到所有的DOM元素都被解析并可用。为此,DOM API提供了DOMContentLoaded
事件:
window.addEventListener('DOMContentLoaded', function() { ... });
除了使用监听器之外,您还有其他两个选项:
- 将
<script>
标签放在闭合的</body>
标签之前:<script src="path/to/my.js"></script>
- 或者在
<script>
中使用defer
属性,这样可以将<script>
放在<head>
中:
<head> ... <script src="path/to/my.js" defer></script> ... </head>