问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

js 怎么实现：在dom文档树加载完成后执行js代码？？

头像
灰色v碰触
    2.9k29225280

    要求：<script> 标签放在 <head></head>标签内部
    大家都知道的：
    <html>
    <head>
    <script>
    window.onload=function(){

    .....

    }
    </script>
    </head>
    <body>
    <div></div>
    </body>
    </html>

    可若是这样：
    <html>
    <head>
    <script src='one.js'></script> // 要求dom加载完后执行
    <script src='two.js'></script> // 要求dom加载完成后执行
    ...
    </head>
    <body>
    <div></div>
    </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>

    javascripthtmlcss
    阅读 12.6k
    12 个回答
    得票最新
    头像
    lloyd_zhou
      1.7k129

      addEventListener注册事件，会把注册的回调函数都执行，不会覆盖。

      另外，文档加载完成的事件是DomContentLoad这个事件是HTML文档解析完成的事件。而onload事件是HTML里面的外部资源等下载完成的事件。

      头像
      crossgate9
        1391

        这里有若干种解决方案，当然最方便的就是把两段代码放在同一个 window.onload 里面。

        一个简单易懂的解决方案是：

        window.onload = function() {
};

var prev = window.onload;
window.onload = function() {
  if (prev) {
    prev();
  }

  // do something
};

        只是这种写法不是那么漂亮，可以考虑用绑定事件的形式来完成，类似jQuery的作法。

        function listen(event, elem, func) {
  if (elem.addEventListener)  // W3C DOM
    elem.addEventListener(evnt,func,false);
  else if (elem.attachEvent) { // IE DOM
     var r = elem.attachEvent("on"+evnt, func);
     return r;
  }
  else window.alert('I\'m sorry Dave, I\'m afraid I can\'t do that.');
}

listen('load', window, function() {});

        当然，执行顺序可能会和绑定顺序不同。需要一致的话，就更复杂一些，维护一个队列。下面的两个链接里面有这种解决方案。

        注：参考了问题一，问题二

        头像
        猎隼丶止戈
          214
          新手上路，请多包涵

          ?要我直接用jquery，就没这么操蛋的问题了，以前老喜欢把script放head里。现在都是在body结尾之前

          头像
          kiddiesdw
            4275

            在两个js文件里只声明函数，在另外的地方用window.onload进行调用

            头像
            laoqiren
              44265566

              jquery里的document.ready就可以解决，可以多个，而且会在dom生成完毕就执行，而不是所有资源加载完毕

              头像
              用户bPcDTY
                8k214247

                用 dom lv3 的 api，需要 html5 支持。

                window.addEventListener('DomContentLoaded', func);
                头像
                七天七夜
                  21222125

                  为什么不用jquery啊

                  头像
                  江湖上
                    99921742

                    这个问题的本质是DOM ready，常见的解决方案有window.onload()事件，jQuery等。。。

                    头像
                    炑木
                      1.4k1411

                      可以加个three.js
                      然后在three.js里面写

                      window.onload=function(){ 
    //one.js 中的方法
    //two.js 中的方法
}
                      头像
                      Morph_Zhou
                        8938

                        如果使用window.onload的话，需要将两个js中的方法都写在window.onload里面，因为一个window对象只可以绑定一个onload事件，但是JQuery中的document.ready可以绑定多个，况且题主要求dom加载完成后才执行，window.onload其实是等到文件加载完成后才执行（除了dom之外还包括css，img等），而document.ready是真正的dom加载完成后执行。
                        另外可以使用addEventListener对window对象绑定事件，但感觉没有JQuery优雅啊。

                        头像
                        mengdu
                          2.2k104663

                          采用事件注册方式注册一个事件就可以了，注册事件有hack；可以去研究下jquery的ready方法，毕竟人家的兼容性好些

                          头像
                          天道总司
                            1101814

                            参考《DOM编程艺术》里的addLoadEvent方法

                            function addLoadEvent(func){
  var oldonload=window.onload;
  if(typeof window.onload!='function'){
    window.onload=func;
  } else{
    window.onload=function(){
     oldonload();
     func();
    }
  }
}

                            在添加了addLoadEvent这个函数之后，如果我们想让刚才那两个函数都在页面加载完毕时得到执行，只需要写出以下代码就能完成上文匿名函数的功能了：

                            addLoadEvent(Function1);
addLoadEvent(Function2);

                            具体可以看这里：http://zhaoyuxiang.cn/blog/archivers/addLoadEvent

                            撰写回答
                            你尚未登录，登录后可以
                            • 和开发者交流问题的细节
                            • 关注并接收问题和回答的更新提醒
                            • 参与内容的编辑和改进，让解决方法与时俱进
                            推荐问题