平时做项目 经常需要使用window.onload,

用法如下:

function func(){alert("this is window onload event!");return;}

window.onload=func;

或者如下:

window.onload=function(){alert("this is window onload event!");return;}

但window.onload 不能同时加载多个函数。

比如:

function t(){

alert("t")

}

function b(){

alert("b")

}

window.onload =t ;

window.onload =b ;

后面会把前面的覆盖,上面代码只会输出 b。

此时可用如下方法解决:

window.onload =function() { t();  b(); }

另一种解决方法如下:


代码

 function addLoadEvent(func) {
  var oldonload = window.onload;//得到上一个onload事件的函数
  if (typeof window.onload != 'function') {//判断类型是否为'function',注意typeof返回的是字符串
    window.onload = func;
  } else {  
    window.onload = function() {
      oldonload();//调用之前覆盖的onload事件的函数---->由于我对js了解不多,这里我暂时理解为通过覆盖onload事件的函数来实现加载多个函数
      func();//调用当前事件函数
    }
  }
} //(完整示例)使用如下: function t(){
alert("t")
}
function b(){
alert("b")
}
function c(){
alert("c")
}
 function addLoadEvent(func) {
  var oldonload = window.onload;
  if (typeof window.onload != 'function') {
    window.onload = func;
  } else {  
    window.onload = function() {
      oldonload();
      func();
    }
  }
} addLoadEvent(t);
addLoadEvent(b);
addLoadEvent(c);
//等价于  window.onload =function() { t();  b(); c() ;}

个人以为直接使用隐式函数(如:window.onload =function() { t();  b(); c() ;})更快捷,当然使用 addLoadEvent 更professional,各取所好吧!

JS window.onload追加函数:


<script>
if(window.attachEvent)//IE:如果浏览器中存在window.attachEvent函数则使用window.attachEvent函数,判断是否是IE还可以使用:if (document.all){//..}
window.attachEvent("onload",function() {alert("add method");});
else  //FireFox
window.addEventListener("load",function() {alert("add method");},true);
</script>

运行,js中alert弹出消息,问题解决。

============相关资料================

attachEvent   将指定函数绑定到事件,以便每当该事件在对象上触发时都调用该函数。

Internet Explorer 从 5.0 开始提供了一个 attachEvent 方法,使用这个方法,就可以给一个事件指派多个处理过程了。attachEvent 对于目前的 Opera 也适用。但是 Mozilla/Firefox 并不支持这个方法。但是它支持另一个 addEventListener 方法,这个方法跟 attachEvent 差不多,也是用来给一个事件指派多个处理过程的。但是它们指派的事件有些区别,在 attachEvent 方法中,事件是以 “on” 开头的,而在 addEventListener
中,事件没有开头的 “on”,另外 addEventListener 还有第三个参数,一般这个参数指定为 false 就可以了。

最后感谢vForm表单验证程序的作者-雷晓宝

本文来自CSDN博客,转载请标明出处:http://blog.csdn.net/chenlei65368/archive/2009/09/12/4544823.aspx

js window.onload 加载多个函数和追加函数的更多相关文章

  1. javascript window.onload 加载多个函数的方法

    用法如下: function func(){alert("this is window onload event!");return;} window.onload=func; 或 ...

  2. JS点击任意标签获得该标签属性,以获得ID为例,以及AJAX的异步原理和 $(document).ready()与window.onload加载方法的区别

    js代码: //$(document).click(function (e) { // 在页面任意位置点击而触发此事件 // var select = ""; // var i = ...

  3. JS:window.onload的使用介绍

    作者: 字体:[增加 减小] 类型:转载 时间:2013-11-13我要评论 window.onload在某些情况下还是比较实用的,比如加载时执行哪些脚本等等,下面有几个不错的示例,需要的朋友可以参考 ...

  4. 动态加载JS文件,并根据JS文件的加载状态来执行自己的回调函数

    动态加载JS文件,并根据JS文件的加载状态来执行自己的回调函数, 在很多场景下,我们需要在动态加载JS文件的时候,根据加载的状态来进行后续的操作,需要在JS加载成功后,执行另一方法,这个方法是依托在加 ...

  5. JS,Javascript加载与函数执行过程

    Js,Javascript加载与函数执行过程 test.html <!DOCTYPE HTML> <html lang="en"> <head> ...

  6. js图片预加载

    图片预加载有大体有几种方式 1.html标签或css加载图片. 显而易见我们使用img标签或者通过标签的background-image属性都可以实现图片的预加载.但是为了避免初次载入过多图片影响体验 ...

  7. js jquery 页面加载初始化方法

    js jquery 页面加载初始化方法 一.js页面加载初始化方法 // 1.在body里面写初始化方法. <body onload='init()'> </body> < ...

  8. js的动态加载、缓存、更新以及复用(四)

    本来想一气呵成,把加载的过程都写了,但是卡着呢,所以只好在分成两份了. 1.页面里使用<script>来加载 boot.js . 2.然后在boot.js里面动态加载 bootLoad.j ...

  9. js的异步加载你真的懂吗

    面试高频之js的异步加载 讲这个问题之前, 我们从另一个面试高频问题来切入, 我们的web页面从开始解析到页面渲染完成都经历了什么 ?  1  ,  创建document对象, 开始解析页面,    ...

随机推荐

  1. POJ1200 A - Crazy Search(哈希)

    A - Crazy Search Many people like to solve hard puzzles some of which may lead them to madness. One ...

  2. Java多线程通讯---------wait,notify区别

    class Res{ public String username; public String sex; } class Out extends Thread{ Res res; public Ou ...

  3. SQL基础教程(第2版)第4章 数据更新:4-1 数据的插入(INSERT)

    第4章 数据更新:4-1 数据的插入(INSERT) ● 将列名和值用逗号隔开,分别括在()内,这种形式称为清单.● 对表中所有列进行INSERT操作时可以省略表名后的列清单.● 插入NULL时需要在 ...

  4. JAVA课程设计——俄罗斯方块(团队)

    1.团队介绍 1.1 团名:终于可以回家了嗷嗷嗷 1.2 团员介绍 2.参考来源 https://www.jb51.net/article/142716.htm 3.项目git地址 https://g ...

  5. UML-逻辑架构精化

    向下请求:Facade模式 向上返回:观察者模式 不局限于上图中指定的层使用相应模式,其他层也可以使用. 另外,尽量不要出现“公共业务模块”,设计时尽量做好系统拆分.否则,一旦修改公共代码,可能会影响 ...

  6. Node.js—第一个动态页面

    话不多说 上代码 没有加什么处理也不严谨 只为效果 const http=require('http'), path=require('path'), fs=require('fs') //创建服务 ...

  7. 题解【[FJOI2018]所罗门王的宝藏】

    本题解同步于luogu emmm切了近年省选题来写题解啦qwq 该题较其他省选题较水吧(否则我再怎么做的出来 思路是图论做法,做法上楼上大佬已经讲的很清楚了,我来谈谈代码实现上的一些细节 \[\tex ...

  8. 系统 win 10 专业版 下载地址

    thunder://QUFodHRwOi8veHoyLjgxMDg0MC5jb20vY25fd2luZG93c18xMF9jb25zdW1lcl9lZGl0aW9uc192ZXJzaW9uXzE4MD ...

  9. uni-app文章详情-富文本展示 优雅展示代码块

    在uni-app开发中,开发一个资讯详情页面,详情里包含图片和代码块.这时候用简单的rich-text控件已经不够用了.用官方demo里的html-parser.js也无法很好的展示代码区域.这个时候 ...

  10. c2000 N2A1 设置 KonNaD Settings & User Manual

    KonNaD Settings & User Manual c2000 N2A1  两个开关都推到左边,都设置成off