在HTML文档完成加载之前,DOM是不完整的。此时如果执行js代码,测试的准确性就无从谈起,所以我们必须让这个函数在网页加载完毕之后才得到执行。我们常用的方法就是:
window.onload = 某个函数;
注:这条浅显易懂语句可以使用,但有时不太适用(当页面加载完成需要执行多个函数时)
假设我们有两个函数,firstFunction()和secondFunction(),如果我想让他们俩都在页面加载时执行,那么我们可能会这样做:
window.onload = firstFunction;
window.onload = secondFunction;
注:这个技巧简单实用,但是不适合函数很多的场合,所以下面介绍一个好的方法addLoadEvent()函数
下面看一个简单的例子吧!
function addLoadEvent(func){
//把widow.onload存储在一个变量中
var oldonload = window.onload;
//如果当前不存在要加载的函数,加载最新传入的函数
if(typeof window.onload != 'function'){
window.onload = func;
}else{
//如果已经存在要加载的函数,执行原来的函数,
//并把新引入的函数放在该函数后面执行,自我感觉有点像递归函数一样
window.onload = function(){
oldonload();
func();
};
}
}
/*
把页面加载完成要执行的函数添加到队列中,依次执行
* */
addLoadEvent(showOne);
addLoadEvent(showTwo);
addLoadEvent(showThree);
/*
以下是几个测试函数
*/
function showOne(){
alert("我是showOne()函数,one,one,one!");
}
function showTwo(){
alert("我是showTwo()函数,two,two,two!");
}
function showThree(){
alert("我是showThree()函数,three,three,three!");
}
代码的功能在页面加载完成时,依次执行showone(),showtwo(),showthree()方法。
调用方法addLoadEvent(func);这里的func 就是需要调用的函数,function addLoadEvent(func){创建了一个函数名为addLoadEvent,参数为func的函数,这里把我们需要加载的函数作为参数在这个addLoadEvent函数中进行调用。}var oldοnlοad=window.onload 定义一个变量,把window.onload赋给oldonload,如果开始的时候window.onload调用了一个函数A(),那么在这里oldonload就等于A();//typeof 判断一个变量的类型,如果window.onload调用的是一个函数,那么这个if条件语句的值就是true那么就执行window.οnlοad=func;(此时的参数func就是我们需要调用的函数)如果条件语句的结果是false,那么就调用一个匿名的函数window.οnlοad=function(){oldonload();func();}这个匿名的函数 会先执行oldonload()函数,然后执行func()这个函数。也就是说,会先调用 正在执行的那个函数,然后在调用我们需要调用的函数A().
//DOM没有提供insertAfter()方法
function insertAfter(newElement, targetElement){
var parent = targetElement.parentNode;
if (parent.lastChild == targetElement) {
// 如果最后的节点是目标元素,则直接添加。因为默认是最后
parent.appendChild(newElement);
}
else {
parent.insertBefore(newElement, targetElement.nextSibling);
//如果不是,则插入在目标元素的下一个兄弟节点 的前面。也就是目标元素的后面
}
}