phpstudy集成环境

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

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

要求：<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>

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

window.addEventListener('DomContentLoaded', func);

为什么不用jquery啊

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

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

参考《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

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

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

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

这里有若干种解决方案，当然最方便的就是把两段代码放在同一个 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() {});

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

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

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

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

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

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

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

【热门文章】
【热门文章】