对window.onload()的理解
2023-03-31 11:05:38 时间
为什么使用window.onload()
因为 JavaScript 中的函数方法需要在 HTML 文档渲染完成后才可以使用,如果没有渲染完成,此时的 DOM 树是不完整的,这样在调用一些 JavaScript 代码时就可能报出"undefined"错误。
- 用于在网页加载完毕之后立即执行的操作,即当HTML文档加载完毕后,立刻执行某个方法
- 通常用于<body>元素,在页面完全载入之后(包括图片、css文件等等)执行脚本代码
window.onload()的使用语法
window.onload 事件绑定事件处理函数,绑定的是一个匿名函数,当然也可以绑定具名函数
a.只有一个要执行的函数语法
window.onload = funcRef;//在页面加载完成后 funcRef 方法会被调用。
b.有多个要执行的函数语法
window.onload=function(){ Func1(); Func2(); Func3(); ..... }
//在页面加载完成后依次执行 Func1、Func2、Func3。
window.onload()应用举例
<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <title>没有使用 window.onload() 测试</title> <style type="text/css"> #bg{ width:120px; height:120px; border:4px solid blue; } </style> <script type="text/javascript"> document.getElementById("bg").style.backgroundColor="#F00"; </script> </head> <body> <div id="bg"></div> </body> </html>
以上实例我们要实现的效果是将 div 的背景颜色设置为 #F90,但是并没有实现此效果,因为代码是顺序执行的,当执行到 document.getElementById("#bg").style.backgroundColor="#F00" 的时候,还没有加载到此 div 对象,所以背景颜色没有设置成功。报错信息如下:
解决方案添加 window.onload 就可以正常执行,代码修改如下:
<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <title>使用 window.onload() 测试</title> <style type="text/css"> #bg{ width:120px; height:120px; border:4px solid blue; } </style> <script type="text/javascript"> window.onload=function(){ document.getElementById("bg").style.backgroundColor="#F00"; } </script> </head> <body> <div id="bg"></div> </body> </html>
window.onload 与 jQuery ready() 区别
window.onload = function () {}; // JavaScript $(document).ready(function () {}); // jQuery
以上两种方式都是在 HTML 文档完毕后再执行 DOM 操作,但它们还是有一定的区别
相关文章
- Python调用C/C++的种种方法
- Ceph分布式存储学习指南2.2 从零开始部署你的第一个Ceph集群
- FaceBook API
- 浏览器可以运行 Python 代码了,Python 也许会变成前后端通吃的语言
- 20 张图告诉你,如何实现一个任务调度系统
- 一个 Python 美化库 - 让代码更炫酷更易读
- OpenHarmony文件管理API实践
- Xnosh Shell:在 Linux 终端结合 Bash Shell 和 Python 的优秀特性
- GneList 来了!抓取列表页极其简单!
- 使用 Python 脚本轻松剪辑/分割大视频
- HarmonyOS 属性动画扩展
- 看一遍就理解:Group By详解
- 微软太会玩了:悄然更改Win11性能变慢描述 实测问题仍存在
- 聊一聊 Cobbler 3.x 部署实战
- 从Hash Join的执行计划的细节中能看到点啥
- 按下ls -l *.py并回车,Shell都为我们做了什么?
- 日志到底应该怎么打印?
- 前后端接口鉴权全解Cookie/Session/Token的区别
- 四种 Python 连接 MySQL 数据库的方法
- 前端基础知识整理汇总一