用外部js文件(而不是嵌入式事件处理函数)会带来一个问题。无论什么时候使用DOM方法,都必须存在一个完整的文档对象模型才行。如果文档没有被完全载入,DOM就是不完整的。
当浏览器从服务器端获取网页时,它会按照页面从上至下的顺序进行解析,并依次创建节点数。当它读取到head元素时,或许会碰到指向外部JavaScript文件的<script>
标签,这时浏览器会把那个JavaScript文件读取进来,然后再从上至下执行,如果一个JavaScript语句用到了getElementsByTagName或者getElementById,浏览器就找不到你要搜索的元素了,因为文档没有加载完毕。
如果你想使用DOM方法,就必须等到文档完全载入之后才行,幸运的是,通过为window对象的load事件附上一个函数,就可以很轻松地解决这个难题:
window.onload = prepareLinks;
window.onload只能赋予一个值,不过可以这样做,文档被载入后,把函数排成队,依次等待执行。为了实现这点,你需要使用addLoadEvent函数:
function addLoadEvent(func){
var oldonload = window.onload;
if(typeof window.onload != 'function'){
window.onload = func;
}else{
window.onload = function(){
if(oldonload){
oldonload();
}
func();
}
}
}