JavaScript 页面加载时调用函数addLoadEvent实现
寒假的时候花了一些时间看了看JavaScript编程艺术,发现里面大量用了addLoadEvent函数,索性就直接把它单独写在了一个js文件里,当用的时候直接调用就行了。这个函数用处广泛,下面给出它的代码:
function addLoadEvent(func)
{
var oldonload=window.onload;
if(typeof window.onload!="function")
{
window.onload=func;
}
else
{
window.onload=function(){
oldonload();
func();
}
}
}
类似于c语言,java中的递归调用的意思。
下面给出实例演示一下这个函数:
html文件:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<p id="message">Whee!</p>
</body>
//调用addLoadEvent.js文件
<script src="../js/addLoadEvent.js"></script>
<script src="../js/Message.js"></script>
</html>
一定要注意不能将两个js的读取顺序弄反。
Message.js文件:
function positionMessage ()
{
if(!document.getElementById) return false;
if(!document.getElementById("message")) return false;
var ele=document.getElementById("message");
ele.style.position="absolute";
ele.style.left="50px";
ele.style.top="100px";
}
function moveMessage ()
{
if(!document.getElementById) return false;
if(!document.getElementById("message")) return false;
var ele=document.getElementById("message");
ele.style.left="200px";
}
addLoadEvent(positionMessage);
这里先调用positionMessage函数。
效果如下:
再加上moveMessage函数。
代码如下:
function positionMessage ()
{
if(!document.getElementById) return false;
if(!document.getElementById("message")) return false;
var ele=document.getElementById("message");
ele.style.position="absolute";
ele.style.left="50px";
ele.style.top="100px";
}
function moveMessage ()
{
if(!document.getElementById) return false;
if(!document.getElementById("message")) return false;
var ele=document.getElementById("message");
ele.style.left="200px";
}
addLoadEvent(positionMessage);
addLoadEvent(moveMessage);
效果如下:
可见,第二个函数实现了对第一个函数的style.left属性覆盖。