ITPub博客

首页 > Linux操作系统 > Linux操作系统 > JavaScript window.onload简介

JavaScript window.onload简介

Linux操作系统 作者:大雄45 时间:2021-02-26 13:40:27 0 删除 编辑
导读 window.onload()方法用于在网页加载完成后立即执行的操作,即当HTML文档加载完成后,立即执行某个方法。

window.onload()通常用于元素,在页面完全加载后(包括图片,css文件等等)执行 代码。

只有一个要执行的函数语法:

窗口。onload = funcRef ;

在页面加载完成后funcRef方法会被调用。

有多个要执行的函数语法:

窗口。onload = function (){ Func1 (); Func2 (); Func3 (); ..... }

在页面加载完成后依次执行Func1,Func2,Func3。

为什么使用 window.onload()?

因为 JavaScript 中的函数方法需要在 HTML 文档渲染完成后才可以使用,如果没有渲染完成,此时的 DOM 树是不完整的,这样在调用一些 JavaScript 代码时就可能报出"undefined"错误。

实例

<!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 对象,所以背景颜色没有设置成功。报错信息如下:
JavaScript window.onload简介JavaScript window.onload简介

我们可以添加 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 事件绑定事件处理函数,绑定的是一个匿名函数,当然也可以绑定具名函数,代码实例如下:

实例

<!DOCTYPE html>   <html>   <head>   <meta charset=" utf-8">   <title>使用 window.onload() 绑定具体函数</title><script type="text/javascript">
 // 函数名为 runoob
window.onload=function runoob(){
  document.write("菜鸟教程 -- 学的不仅是技术,更是梦想!!!");
}</script></head><body>
  </body></html>

有多个要执行的函数实例:

实例

<!DOCTYPE html>   <html>   <head>   <meta charset=" utf-8">   <title>使用 window.onload() 执行多个函数</title><style type="text/css">#bg{
  width:100px;
  height:100px;
  border:2px solid blue;
}</style><script type="text/javascript">window.onload=function(){
    function runoob1(){
        document.getElementById("bg").style.backgroundColor="#F00";
    }
    function runoob2(){
        document.getElementById("bg").style.width="200px";
        document.getElementById("bg").style.height="200px";
    }
    runoob1();
    runoob2();
}</script></head><body>
    <div id="bg"></div></body></html>
window.onload 与 jQuery ready() 区别
window.onload = function () {};    // JavaScript 
$(document).ready(function () {}); // jQuery

以上两种方式都是在 HTML 文档完毕后再执行 DOM 操作,但它们还是有一定的区别,如下图:
JavaScript window.onload简介JavaScript window.onload简介

来自 “ ITPUB博客 ” ,链接:http://blog.itpub.net/69955379/viewspace-2759643/,如需转载,请注明出处,否则将追究法律责任。

请登录后发表评论 登录
全部评论

注册时间:2019-12-11

  • 博文量
    851
  • 访问量
    460132