window.onload引起的一系列思考

原来只想写一window.onload一次加载多个函数内容，结果在写的过程中遇到了“意外”

我们知道在页面上多次用window.onload加载函数时，只会执行最后一次执行的函数，如果我想一次执行多个怎么办？

在看163代码是发现有人这样用，感觉不错（怎么自己就没有想到呢，原来以为没有办法，哎！）

代码一：

function test1(){
    alert('11111');
}

function test2(){
    alert('222222');
}

window.onload = function(){
    test1();
    test2();
}

这样就可以一次执行多个函数，本来写到这也就完了，可“意外”就在后面发生了

我想测试一下：代码二

function test1(){        
    alert('11111');
}

function test2(){       
    alert('222222');
}

window.onload = test1();  //注意，原本正确 window.onload = test1; 
window.onload = test2();

上面一段代码我在FF中执行了一下，没想到竟然弹了两次框，于是有在IE下尝试，但是IE下显示一次，我就纳闷怎么还不一样？

于是继续试，如下：代码三

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript">
    
    function test1(){
        var test = document.getElementById("test"); 
        alert (test);
    }
    function test2(){
        alert('222');
    }
    window.onload = test1();
    window.onload = test2();
    
</script>

<style type=”test/css">
    
</style>
<title>closures</title>
</head>

<body>
<div id="test"></div>
</body>
</html>

结果：第一次弹出框为null，第二次弹出222（FF），而IE只弹了一次，即null

从代码二出就可以看到，ie与火狐不一样（不一样且先不说），代码三在次证明了代码二结论。

再试：

将代码三中

　　window.onload = test1;

window.onload = test2; 的括号去掉后，我们可以看到结果又不一样了。

结果：只弹一次2222(FF),IE同样2222

不明白，于是搜了一下有如下例子：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<script> 
window.onload = doIt(); 
function doIt() { 
var oDiv = document.getElementById("div1"); 
alert (oDiv); 
} 
</script> 
</head> 
<body> 
<div id="div1"></div> 
</body> 
</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<script> 
window.onload = doIt; 
function doIt() { 
var oDiv = document.getElementById("div1"); 
alert (oDiv); 
} 
</script> 
</head> 
<body> 
<div id="div1"></div> 
</body> 
</html>

从两次分析猜测，window.onload = XXX(); 和window.onload = XXX;执行的时机不同，加上括号，则按照从上到下的顺序执行了，不加括号

则在页面加载完后执行，于是想到，这会不会影响到代码一的执行呢，测试后发现，不影响！！

posted @ 2011-03-25 19:40 opqrst 阅读(3565) 评论(1) 收藏举报

刷新页面返回顶部

window.onload引起的一系列思考

公告