window.onload事件应用代码实例

快乐打工仔 分类:实例代码

window.onload事件应用代码实例属于前端实例代码,有关更多实例代码大家可以查看

这是一个最为基础的知识,之所以基础因为这是初学者必须要掌握的而且也是很容易被掌握的只是。

此事件的作用是等待文档内容完全加载完毕再去执行函数中的内容,否则有可能会出现无法获取对象的问题。

先看一段代码实例:

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<title>前端教程网</title>
<script type="text/javascript"> 
var odiv=document.getElementById("thediv");
</script>
</head>
<body>
<div id="thediv">前端教程网</div>
</body>
</html>

上面的代码会报错,因为代码是顺序执行的,当指定到document.getElementById("thediv")的时候,div元素并没有被浏览器加载完毕,所以前面的代码就无法获取div元素对象,这个时候window.onload事件的作用就可以得意体现,代码修改如下:

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<title>前端教程网</title>
<script type="text/javascript"> 
window.onload=function(){
  var odiv=document.getElementById("thediv");
}
</script>
</head>
<body>
<div id="thediv">前端教程网</div>
</body>
</html>

上面的代码就可以正确获取div元素对象了。

window.onload事件应用代码实例,这样的场景在实际项目中还是用的比较多的,关于window.onload事件应用代码实例就介绍到这了。

回复

我来回复
  • 暂无回复内容