要求：<script> 标签放在 <head></head>标签内部
大家都知道的：
<html>
<head>
<script>
window.onload=function(){
12
903.....}
</script>
</head>
<body>
<p></p>
</body>
</html>
可若是这样：
<html>
<head>
<script src='one.js'></script> // 要求dom加载完后执行
<script src='two.js'></script> // 要求dom加载完成后执行
...
</head>
<body>
<p></p>
</body>
</html>
若是:
one.js
window.onload=function(){ ....}
two.js
window.onload=function(){....}
则 two.js 中的window.onload 会 覆盖 one.js中的，所以也就成了： 只能执行two.js中的代码了。
有没有办法让one.js 和 two.js 都能够在dom加载完成后执行？？
不包括这样的方法：
<script defer='defer' src'one.js'></script>
<script defer='defer' src'two.js'></script>
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
收藏
addEventListener注册事件，会把注册的回调函数都执行，不会覆盖。
另外，文档加载完成的事件是DomContentLoad这个事件是HTML文档解析完成的事件。而onload事件是HTML里面的外部资源等下载完成的事件。
这里有若干种解决方案，当然最方便的就是把两段代码放在同一个 window.onload 里面。
一个简单易懂的解决方案是：
只是这种写法不是那么漂亮，可以考虑用绑定事件的形式来完成，类似jQuery的作法。
当然，执行顺序可能会和绑定顺序不同。需要一致的话，就更复杂一些，维护一个队列。下面的两个链接里面有这种解决方案。
注：参考了问题一，问题二
在两个js文件里只声明函数，在另外的地方用window.onload进行调用
jquery里的document.ready就可以解决，可以多个，而且会在dom生成完毕就执行，而不是所有资源加载完毕
用 dom lv3 的 api，需要 html5 支持。
为什么不用jquery啊
这个问题的本质是
DOM ready，常见的解决方案有window.onload()事件，jQuery等。。。可以加个three.js
然后在three.js里面写
如果使用window.onload的话，需要将两个js中的方法都写在window.onload里面，因为一个window对象只可以绑定一个onload事件，但是JQuery中的document.ready可以绑定多个，况且题主要求dom加载完成后才执行，window.onload其实是等到文件加载完成后才执行（除了dom之外还包括css，img等），而document.ready是真正的dom加载完成后执行。
另外可以使用addEventListener对window对象绑定事件，但感觉没有JQuery优雅啊。