关注前端开发微信微信号web007007

页面加载时调用js方法:简述 onload

作者 管理员 发布时间 2012-06-08 14:33 文章分类 JavaScript 文章评论 抢沙发 阅读次数

也许多数人对于 onload 早已是轻车熟路,可我觉得还是有必要整理一篇稍微详细一些的文章。也方便自己加深记忆。

一直没有仔细看过js文档中关于 body 的 onload 属性 和 window.onload 方法。今天就此作一小结吧。

可以从多个切面入手。比如,页面加载时,只调用一个方法,或者页面加载时需要调多个js方法。就按照这个来说吧。

1.最简单的调用


<html>
// 当然也可以简写成: onload="test()"
<body onload="javascript:test();">
</body>
</html>

2.在 javascript 语句块中调用


&lt;html&gt;
&lt;script type=&quot;text/javascript&quot;  language=&quot;<a href="http://www.web92.net/tag/javascript" title="查看 JavaScript 中的全部文章" target="_blank">JavaScript</a>&quot;&gt;
function test(){
// todo sth
}

window.onload = test();

&lt;/script&gt;
&lt;body&gt;
...
&lt;/body&gt;
&lt;/html&gt;

3.同时调用多个 js 方法


&lt;html&gt;
// 当然也可以简写成: onload=&quot;test();test1();test2()&quot;
&lt;body onload=&quot;javascript:test();test1();test2()&quot;&gt;
&lt;/body&gt;
&lt;/html&gt;

1

&lt;strong&gt;4.在 javascript 语句中同时调用多个 js 方法&lt;/strong&gt;

1

&lt;html&gt;
&lt;script type=&quot;text/javascript&quot;  language=&quot;<a href="http://www.web92.net/tag/javascript" title="查看 JavaScript 中的全部文章" target="_blank">JavaScript</a>&quot;&gt;
function test(){ ... }
function test1(){ ... }
function test2(){ ... }
window.onload =function(){
test();
test1();
test2();
}

&lt;/script&gt;
&lt;body&gt;
...
&lt;/body&gt;
&lt;/html&gt;

以上解决办法都适合数据量小,程序不复杂的系统。如果数据量大,程序也很复杂,可以选择通过 自定义函数 的方式来解决。

5.通过自定义函数来同时调用js方法


&lt;html&gt;
&lt;script type=&quot;text/javascript&quot;  language=&quot;<a href="http://www.web92.net/tag/javascript" title="查看 JavaScript 中的全部文章" target="_blank">JavaScript</a>&quot;&gt;
function test(){ ... }
function test1(){ ... }
function test2(){ ... }

// onload 事件侦听函数
function addLoadEvent(func){
var oldonload = window.onload;
if( typeof window.onload != &quot;function&quot; ){
window.onload = func;
} else{
window.onload = function(){
oldonload() ;
func();
}
}
}

// 调用方式
addLoadEvent(test());
addLoadEvent(test());
addLoadEvent(test());
&lt;/script&gt;
&lt;body&gt;
...
&lt;/body&gt;
&lt;/html&gt;

最后,需要说明的是:两种方式不能混用,同一页面 onload 事件仅有一次.

本文固定链接: http://www.web92.net/354.html | WEB前端开发

该日志由 于2012年06月08日发表在 JavaScript 分类下, 你可以发表评论,并在保留原文地址及作者的情况下引用到你的网站或博客。
原创文章转载请注明: 页面加载时调用js方法:简述 onload | WEB前端开发
关键字: