JS实现文档加载完成后执行代码


Posted in Javascript onJuly 09, 2015

在执行某些操作的时候,需要当文档完全加载完成之后再去执行,否则可能出现意向不到的情况,先看一段代码实例:

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<title>三水点靠木</title>
<style type="text/css"> 
div{ 
 width:200px; 
 height:200px; 
} 
</style> 
<script type="text/javascript"> 
document.getElementById("mytest").style.backgroundColor="#639"; 
</script> 
</head> 
<body> 
<div id="mytest"></div> 
</body> 
</html>

以上代码的初衷是将div的背景颜色设置为#639,但是并未达到我们预期的效果,这是因为文档加载的时候代码是顺序执行的,当执行js的设置背景颜色代码的时候,还没有加载到指定的div,所以js语句根本没有获取到对象。代码修改如下:

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<title>三水点靠木</title>
<style type="text/css"> 
div{ 
 width:200px; 
 height:200px; 
} 
</style> 
<script type="text/javascript"> 
window.onload=function(){ 
 document.getElementById("mytest").style.backgroundColor="#639"; 
} 
</script> 
</head> 
<body> 
<div id="mytest"></div> 
</body> 
</html>

以上代码实现了预期的效果,这是因为将代码放到了一个函数中,而此函数用作了window.onload事件的事件处理函数。window.onload事件触发的条件是当前文档完全加载完成,当此事件被触发之后,就会执行它的事件处理函数,这样因为所有文档都已加载了,就不存在js语句无法获得对象的情况了。

以上所述就是本文的全部内容了,希望大家能够喜欢。

Javascript 相关文章推荐
js传值 判断
Oct 26 Javascript
捕获浏览器关闭、刷新事件不同情况下的处理方法
Jun 02 Javascript
手机浏览器 后退按钮强制刷新页面方法总结
Oct 09 Javascript
jQuery通过ajax方法获取json数据不执行success的原因及解决方法
Oct 15 Javascript
Jquery Easyui进度条组件Progress使用详解(8)
Mar 26 Javascript
node.js实现复制文本到剪切板的功能
Jan 23 Javascript
Form表单上传文件(type=&quot;file&quot;)的使用
Aug 03 Javascript
详解require.js配置路径的用法和css的引入
Sep 06 Javascript
Windows安装Node.js报错:2503、2502的解决方法
Oct 25 Javascript
vue实现的树形结构加多选框示例
Feb 02 Javascript
JavaScript实现猜数字游戏
May 20 Javascript
JavaScript实现手风琴效果
Feb 18 Javascript
jQuery检测某个元素是否存在代码分享
Jul 09 #Javascript
jquery.map()方法的使用详解
Jul 09 #Javascript
jQuery实现鼠标点击弹出渐变层的方法
Jul 09 #Javascript
javascript+ajax实现产品页面加载信息
Jul 09 #Javascript
浅谈JavaScript中null和undefined
Jul 09 #Javascript
兼容各大浏览器的JavaScript阻止事件冒泡代码
Jul 09 #Javascript
JavaScript包装对象使用详解
Jul 09 #Javascript
You might like
让php处理图片变得简单 基于gb库的图片处理类附实例代码下载
2011/05/17 PHP
php7函数,声明,返回值等新特性介绍
2018/05/25 PHP
JavaScript获得选中文本内容的方法
2008/12/02 Javascript
预加载css或javascript的js代码
2010/04/23 Javascript
jquery下动态显示jqGrid以及jqGrid的属性设置容易出现问题的解决方法
2010/10/22 Javascript
window.parent与window.openner区别介绍
2012/04/12 Javascript
js控制href内容的连接内容的变化示例
2014/04/30 Javascript
IE6-IE9中tbody的innerHTML不能赋值的解决方法
2014/06/05 Javascript
Node.js开源应用框架HapiJS介绍
2015/01/14 Javascript
JavaScript Length 属性的总结
2015/11/02 Javascript
AngularJS基础 ng-csp 指令详解
2016/08/01 Javascript
Vue 滚动行为的具体使用方法
2017/09/13 Javascript
jquery如何实现点击空白处隐藏元素
2017/12/05 jQuery
在vue-cli搭建的项目中增加后台mock接口的方法
2018/04/26 Javascript
学习Vue组件实例
2018/04/28 Javascript
jquery判断滚动条距离顶部的距离方法
2018/09/05 jQuery
小程序实现日历左右滑动效果
2019/10/21 Javascript
vue中keep-alive,include的缓存问题
2019/11/26 Javascript
Python3 socket同步通信简单示例
2017/06/07 Python
详谈Python 窗体(tkinter)表格数据(Treeview)
2018/10/11 Python
Python爬虫实现验证码登录代码实例
2019/05/10 Python
Python实现语音识别和语音合成功能
2019/09/20 Python
Django框架之中间件MiddleWare的实现
2019/12/30 Python
Python HTMLTestRunner可视化报告实现过程解析
2020/04/10 Python
python3代码输出嵌套式对象实例详解
2020/12/03 Python
HTML5离线缓存Manifest是什么
2016/03/09 HTML / CSS
Bench加拿大官方网站:英国城市服装品牌
2017/11/03 全球购物
奥地利度假券的专家:we-are.travel
2019/04/10 全球购物
中学生学雷锋活动心得体会
2014/03/10 职场文书
公司合作意向书范文
2014/07/30 职场文书
2015年大学生入党自荐书
2015/03/24 职场文书
2016优秀毕业生个人事迹材料
2016/02/29 职场文书
python之django路由和视图案例教程
2021/07/26 Python
如何利用 CSS Overview 面板重构优化你的网站
2021/10/24 HTML / CSS
MySQL外键约束(Foreign Key)案例详解
2022/06/28 MySQL
Nginx配置使用详解
2022/07/07 Servers