关于window.onload的一些小理解

这今天写一个demo,之前一直很好,这次碰到了一个window.onload问题,在网上看了很多资料,就整理整理!

window.onload 是(1)等页面内包括图片的所有元素加载完毕后才能执行,这里还和jQuery里的$(document).ready()不太一样,jQuery里的是只要dom结构加载完就执行;

(2)不能同时使用多个window.onload,例如window.onload = fun1;window.onload = fun2;这样的话只会执行第二个;第一个被覆盖了;要是使用多个的话,后面我会说大牛们教给我们的方法。

我写程序大体的意思这样写的:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>简单测试</title>

<script type="text/javascript">

    var oBox = document.getElementById(‘box‘);
        aBoxDiv = oBox.getElementsByTagName(‘div‘);//出问题了
        window.onload = function(){
            //这里是代码
            }

</script>

<body>
<div id="box">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</div>

</body>
</html>

因为我是小白吧,很久之前知道windown.onload的问题,不过现在又忘了!我就郁闷了,我写的很对呀,怎么有这个问题呀!奥,人家浏览器说了不能读取null中的getElementsByTagName的属性,又是测试了一下,知道了。

这个在window.onload外面,所以会先执行,这是就问题来了,dom都没有加载,他上哪里去找oBox = document.getElementById(‘box‘),里的div的元素,没找到,他会返回null,这个oBox真的是null,但是下一句程序就会报错了,这个相当于aBoxDiv = null.getElementsByTagName(‘div‘);null对象里怎么能找到这个属性呀。

所以以后就要把这些获取dom节点的声明,一定要放在window.onload里,要不就会出错的,其他的要是声明全局变量可以放在外面,但是获取dom节点一定要放在里面。

之后就查了查window.onload:

有人说,如果你想这样window.onload = fun1;不如用window.onload = function(){ fun1();}因为第一种在木屑情况不好用。

如果你想加载多个。可以用这种办法:

第一种是用于不太复杂的程序:

     <script type="text/javascript">
      function func(){//这里是代码}
      function func2(){//这里是代码}
      function func3(){//这里是代码}
      window.onload = function(){
      func();
      func2();
      func3();
     }
     </script>

第二种是:

   <script type="text/javascript">
      function func(){//这里是代码}
      function func2(){//这里是代码}
      function func3(){//这里是代码}

      function addLoadEvent(func){
         var oldonload=window.onload;
         if(typeof window.onload!="function"){
             window.onload=func;
          } else {
             window.onload=function(){
                  oldonload();
                  func();
               }
             }
       }//加载多个addLoadEvent(func);addLoadEvent(func2);addLoadEvent(func3);

这代码的意思是:声明了oldonload = window.onload,其实这个就是保留在我要用之前,他的旧值;接下来,typeof一下

看看这个window.onload之前有人用过吗,typeof window.onload 值是object,不等于function,原来没有人用呀,那我就征用window.onload,那就执行真中的语句;

如果typeof返回的是function,这就说明window.onload之前被人用了,但是,window.onload就一个,只能绑定一个,这可怎么办呢??咱们都是文明人,你先用的onload,那就你先用完了,我再用,不就完事了!就有了这样的语句了(这段解释是给初学者看的,大神就不要看了)

还有最后一种是:

用window.attachEvent,(IE私房)和window.addEventListener,(FF等)

这个方法还可以用来触发其他的多个事件的绑定,功能很强大的

这个方法也是极好极好的

<script type="text/javascript">
function func(){}
function func2(){}
window.addEventListener(‘load‘,func,false);
window.addEventListener(‘load‘,func2,false);
</script>

这个兼容性的写法我就不写了。

欢迎各位指证,我其中理解的不足或者是错误。

时间: 2024-10-25 20:48:12

关于window.onload的一些小理解的相关文章

$(document).ready和window.onload,细微小区别,ready是jQuery的方法,onload是window的方法

$(document).ready和window.onload的区别 $(document).ready和window.onload都是在都是在页面加载完执行的函数,大多数情况下差别不大,但也是有区别的. $(document).ready:是DOM结构绘制完毕后就执行,不必等到加载完毕. 意思就是DOM树加载完毕,就执行,不必等到页面中图片或其他外部文件都加载完毕.并且可以写多个.ready. window.onload:是页面所有元素都加载完毕,包括图片等所有元素.只能执行一次. 原文地址:

window.onload和$(document).ready()的区别

首先概念上分清楚这二者:其实从名称上就能很好的区分 (1)window对象javascript的BOM对象(表示浏览器窗口,用白话说就是你当前访问的这个网页),所以window.onload表示的就是当前浏览器窗口(包括当前html网页上的所有资源:dom树.图片等)加载完成后,接下来才会执行里面写的js代码: (2)document对象是javascript的DOM对象(表示文档对象模型,用白话说就是你当前访问的这个网页的整个dom树结构),所以$(document).ready()表示的就是

jQuery基础之(三)jQuery功能函数前缀及与window.onload冲突

1.jQuery功能函数前缀 在javascript中,开发者通常会编写一些小函数来处理各种操作细节,例如在用户提交表单时,要将文本框最前端和最末端的空格内容清理掉.而javascript中没有类似trim()功能,在师院jQuery后,便可以使用trim()函数. trim()函数是jQuery对象的一个方法,使用以下例子 <script type="text/javascript"> var sString = " 1234567890"; sStr

jQuery Ready 与 Window onload 的区别(转)

“我们都知道,很多时候,在页面加载完后都需要做一些相应的初始化动作.例如,运行某些js特效,设置表单等等.怎么知道页面加载完了呢?一 般情况下都是设置body标签的onload监听window的load事件.但load事件是要在页面的元素全部加载完了才触发的,如果页面上图片较多 或图片太大,就会导致初始化的代码未被执行的时候用户就做了其它操作了. Jquery库提供了一个非常方便好用的函数( $(selector).ready()),让我们可以在页面的dom加载完后就可以做相应的操作(当然,这还

$(document).ready() 、window.onload、body.Onload()、 $(window).load、image.onload的区别

首先说说window和document,直观上来讲,window代表的是浏览器窗口,而document代表的是浏览器窗口中加载的dom元素,进一步说,document是window的一个属性,window是最顶级的对象. 二者有啥区别呢?很好理解,假设现在有一个浏览器,里边加载的页面特别长,已经超出了一屏,当然,肯定会出现滚动条了,这时候,$(window).height()和$(document).height()是不相等的,document的高度肯定要比window的大,因为window窗口

jQuery Ready 与 Window onload 的区别

在网上看到一篇文章与大家分享一下: “我们都知道,很多时候,在页面加载完后都需要做一些相应的初始化动作.例如,运行某些js特效,设置表单等等.怎么知道页面加载完了呢?一般情况下都是设置body标签的onload监听window的load事件.但load事件是要在页面的元素全部加载完了才触发的,如果页面上图片较多或图片太大,就会导致初始化的代码未被执行的时候用户就做了其它操作了. Jquery库提供了一个非常方便好用的函数( $(selector).ready()),让我们可以在页面的dom加载完

window onload 与 img onload事件

通常,window.onload就是加载完dom之后执行的.而img就是加载完图片完执行它的onload事件,根据img的src是否加载完成. 因此,看下面代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http

window.onload、DOMContentLoaded和$(document).ready()

window.onload.DOMContentLoaded和$(document).ready() <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <scr

javascript jquery document.ready window.onload

网易 博客 下载LOFTER客户端 注册登录 加关注 凡图的编程之路 2012年7月从一个编程新手的点点滴滴 首页 日志 LOFTER 相册 博友 关于我 日志 关于我 Holyson 闻道有先后,术业有专攻 加博友   关注他 文章分类 ·css(2) ·.net控件事件(3) ·帐号密码(0) ·JS与JQ(12) ·sql server指南(5) ·杂谈(2) ·C#基础指南(18) ·.net成长篇(38) ·更多 > LOFTER精选 注册免费冲印20张照片 > 网易新闻 清华毕业学