JavaScript的window.load小记

最新推荐文章于 2024-08-15 11:39:27 发布

转载最新推荐文章于 2024-08-15 11:39:27 发布 · 1.4k 阅读

1 ·

CC 4.0 BY-SA版权

原文链接：https://my.oschina.net/shuangquan/blog/2998403

文章标签：

#javascript #ViewUI

本文介绍了JavaScript中window.onload事件的用途，它用于确保文档内容完全加载后执行脚本。文章讨论了不同浏览器的支持情况，提供了代码示例说明如何正确使用window.onload事件处理函数，以避免在页面元素未加载时执行脚本导致的问题。同时，文章提到了addEventListener和attachEvent方法作为替代的事件绑定方式。

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.οnlοad=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] 纯文本查看 复制代码

1 2	`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事件。

转载于:https://my.oschina.net/shuangquan/blog/2998403