传智博客
快捷导航
蚂蚁部落 网站首页 前端教程 JS教程 查看内容

栏目导航

≡基础知识≡

≡操作符≡

≡语句≡

≡函数≡

≡面向对象≡

≡对象≡

≡事件≡

≡事件对象≡

≡操作DOM方法≡

≡操作DOM属性≡

≡操作table表格≡

≡操作select控件≡

≡操作cookie≡

≡浏览器对象模型≡

≡进阶≡

window.onload 事件

2017-12-5 17:21| 发布者: admin| 查看: 2787| 评论: 0|来自: 蚂蚁部落

传智播客

load事件通常用于检测文档内容或者图片是否加载完毕。

本文着重介绍注册在window对象上load事件,也就是window.onload事件。

关于事件处理函数注册,可以参阅如何注册事件处理函数一章节。

浏览器支持:

(1).IE浏览器支持此事件。

(2).edge浏览器支持此事件。

(3).火狐浏览器支持此事件。

(4).Opera浏览器支持此事件。

(5).谷歌浏览器支持此事件。

(6).safria浏览器支持此事件。

网页中的JavaScript脚本代码往往需要在文档加载完成后才能够去执行,否则可能导致无法获取对象的情况,为了避免类似情况的发生,可以使用以下两种方式:

(1).将脚本代码放在网页的底端,运行脚本代码的时候,可以确保要操作的对象已经加载完成。

(2).通过window.onload来执行脚本代码。

第一种方式感觉比较凌乱(其实推荐使用),我们通常需要将脚本代码放在一个更为合适的地方,window.onload方式将是一个良好的选择。window.onload是一个事件,当文档内容完全加载完成会触发该事件。可以为此事件注册事件处理函数,并将要执行的脚本代码放在事件处理函数中,于是就可以避免获取不到对象的情况。

先看一段代码实例:

[HTML] 纯文本查看 复制代码运行代码
<!DOCTYPE html>   
<html>   
<head>   
<meta charset=" utf-8">   
<meta name="author" content="http://www.softwhy.com/" /> 
<title>蚂蚁部落</title>
<style type="text/css">
#bg{
  width:100px;
  height:100px;
  border:2px solid red;
}
</style>
<script type="text/javascript">
document.getElementById("bg").style.backgroundColor="#F90";
</script>
</head>
<body>
  <div id="bg"></div>
</body>
</html>

代码的初衷是将div的背景颜色设置为#F90,但是并没有实现此效果,因为代码是顺序执行的,当执行到document.getElementById("#bg").style.backgroundColor="#F90"的时候,还没有加载到此div对象,所以设置也就不能够成功。代码修改如下:

[HTML] 纯文本查看 复制代码运行代码
<!DOCTYPE html>   
<html>   
<head>   
<meta charset=" utf-8">   
<meta name="author" content="http://www.softwhy.com/" /> 
<title>蚂蚁部落</title>
<style type="text/css">
#bg{
  width:100px;
  height:100px;
  border:2px solid red;
}
</style>
<script type="text/javascript">
window.onload=function(){
  document.getElementById("bg").style.backgroundColor="#F90";
}
</script>
</head>
<body>
  <div id="bg"></div>
</body>
</html>

代码完成将div背景颜色设置为#F90,将设置背景颜色的代码放置在window.onload的事件处理函数中,当文档加载完成后,才会执行事件处理函数,保证文档已经加载完成。

事件处理函数绑定:

(1).window.onload=function(){}:

前面的代码就是使用此种方式为window.onload事件绑定事件处理函数,绑定的是一个匿名函数,当然也可以绑定具名函数,代码实例如下:

[HTML] 纯文本查看 复制代码运行代码
<!DOCTYPE html>   
<html>   
<head>   
<meta charset=" utf-8">   
<meta name="author" content="http://www.softwhy.com/" /> 
<title>蚂蚁部落</title>
<script type="text/javascript">
window.onload=function myalert(){
  alert("绑定成功!");
}
</script>
</head>
<body>
 
</body>
</html>

不能以以下方式为此事件绑定多个事件处理函数:

[JavaScript] 纯文本查看 复制代码运行代码
window.onload=function a(){}
window.onload=function b(){}

上代码不能为window.onload事件绑定多个事件处理函数,最后一个会覆盖前面的所有函数。

代码可以变通一下:

[HTML] 纯文本查看 复制代码运行代码
<!DOCTYPE html>   
<html>   
<head>   
<meta charset=" utf-8">   
<meta name="author" content="http://www.softwhy.com/" /> 
<title>蚂蚁部落</title>
<style type="text/css">
#bg{
  width:100px;
  height:100px;
  border:2px solid red;
}
</style>
<script type="text/javascript">
window.onload=function(){
  function a(){
    document.getElementById("bg").style.backgroundColor="#F90";
  }
  function b(){
    document.getElementById("bg").style.width="200px";
  }
  a();
  b();
}
</script>
</head>
<body>
  <div id="bg"></div>
</body>
</html>

(2).addEventListener()和attachEvent():

关于这两种方式可以参阅JavaScript addEventListener()一章节。

下面再看一个为Image图片对象注册load事件处理函数的代码。

[JavaScript] 纯文本查看 复制代码运行代码
var img=new Image();
img.onload=function(){
  var iheight=img.height;
  var iwidth=img.width;
  alert(iwidth);
};
img.src="delete.gif";

如果图片加载完毕,那么就会触发load事件。


鲜花

握手

雷人

路过

鸡蛋

最新评论

关于我们|手机版|小黑屋| ( 鲁ICP备10022556号-3 )

GMT+8, 2017-12-13 05:36 , Processed in 0.065385 second(s), 22 queries .

Powered by Discuz! X3.2 Licensed

Copyright © 2012-2017 Design: 蚂蚁部落

返回顶部