在做前端工作中,我们想要设置某个函数prepare,让它在网页加载完毕后执行,会触发一个onload事件,这个事件与windows对象相关联,必须把prepare函数绑定到这个时间上,语法如下:window.onload=prepare;

这个方法可以解决我的问题,但是,如果我有两个函数firstfunc和secondfunc,我想让他们两个都在页面加载完成后得到执行,我该怎么做呢?

window.onload=firstfunc;

window.onload=secondfunc;

像这样逐一绑定,运行结果是secondfunc将会取代firstfunc,我们会这样想,既然每个事件处理函数只能绑定一条指令,那我可以这样来做,我先创建一个匿名函数来容纳这两个函数,然后把匿名函数绑定到onload事件上,如下所示:

window.onload=function(){

    firstfunc();

    secondfunc();

}

它确实能很好地工作-----在需要绑定的函数不是很多的场合,这是最简单的解决方案。

下面我给大家分享一种最近学到的很有弹性的解决方案,这个方案需要额外多写代码,写了这些代码,把函数绑定到onload事件就很简单了,函数如下:

function addLoadEvent(func){
    var oldOnload=window.onload;
    if(typeof window.onload!='function'){
      window.onload=func;
    }else{
      window.onload=function(){
        oldOnload();
        func();
      }
    }
  }

当需要绑定某个函数到onload事件上时,只需要调用这个函数:addLoadEvent(函数名);即可。

共享onload事件的更多相关文章

  1. 原生javascript 共享onload事件

    在工作时,我们给一个元素绑定了事件,如果dom还没加载完成,就执行了js代码,就不会绑定成功.常规解决方案就是用: window.onload = EventFunction; 可是如果有两个 事件, ...

  2. js共享onload事件

    问题:通过js进行事件绑定,必须在HTML文档加载完成后再执行js脚本,否则可能因DOM不完整导致无法完成预计的效果,但对于不同的需求如何选用最佳的实现方式呢,这里做了整理,可以做参考. 一.对于小型 ...

  3. 利用 onload 事件监控跨站资源

    用过 CSP 的都很郁闷,上报的只有违规的站点名,却没有具体路径.这是缺陷,还是特意的设计? 显然,CSP 是为安全定制的,里面的规范自然要严格制定,否则就会带来新的安全问题.如果支持详细路径的上报, ...

  4. 【XSS】利用 onload 事件监控流量劫持

    说到跨站资源监控,首先会联想到『Content Security Policy』.既然 CSP 好用,我们何必自己再搞一套呢.那就先来吐槽下 CSP 的缺陷. 目前的 CSP 日志不详细 用过 CSP ...

  5. JavaScript 中 onload 事件绑定多个方法

    当需要调用的方法较多时,我们可以进一步优化,编写一个专门用于绑定 onload事件的方法: function addLoadEvent(func) { //把现有的 window.onload 事件处 ...

  6. jQuery $(document).ready()和JavaScript onload事件

    jQuery $(document).ready()和JavaScript onload事件 Why we need a right time? 对元素的操作和事件的绑定需要等待一个合适的时机,可以看 ...

  7. onload事件-----addLoadEvent函数

    在给网页加一些特效时经常要在<body>中加入“onload”事件,即在网页加载完后执行某事件,例如:<body onload=”alert(‘欢迎光临!')”,但这样做有个大的缺陷 ...

  8. javascript中onload事件如何绑定及执行顺序

    onload事件,顾名思义就是为了js程序能够在网页加载成功过后进行执行.对于放在head里面的js来说,非常必要. 如何给网页绑定onload,主要有三种方式: window.onload=func ...

  9. jQuery的document ready与 onload事件——你真的思考过吗?

    在进行实验和资料查询时,我遇到了几个关键问题: 1. window.onload到底是什么加载完触发? 2. body为什么会有onload事件? 3. 为什么是window.onload,而不是do ...

随机推荐

  1. css实现自适应屏幕高度;

    css实现自适应屏幕高度: <!DOCTYPE html><html lang="en"><head> <meta charset=&qu ...

  2. Legacy Notes网络和服务端配置的笔记

    在云服务器上使用LAMP全过程: 第一步:传文件 在windows上下载winscp,连接使用scp协议.注意:centos需要安装scp yum install openssh-clients 即可 ...

  3. jQuery获取多种input值的方法

    1 if($("input[name=item][value='val']").attr('checked')==true) //判断是否已经打勾 name即控件name属性,va ...

  4. Linux LVM硬盘管理之一:概念介绍

    一.LVM概念介绍: LVM是 Logical Volume Manager(逻辑卷管理)的简写,它由Heinz Mauelshagen在Linux 2.4内核上实现.LVM将一个或多个硬盘的分区在逻 ...

  5. 使用扩展方法将DataTable转换为List<T>

    在将DataTable转换为List<T>时,找到了网上的方案,原文链接:http://stackoverflow.com/questions/4593663/fetch-datarow- ...

  6. .NET操作Xml类

    using System; using System.Collections.Generic; using System.Text; using System.Data; using System.I ...

  7. MyBatis原理分析之三:初始化(配置文件读取和解析)

    1. 准备工作 编写测试代码(具体请参考<Mybatis入门示例>),设置断点,以Debug模式运行,具体代码如下: )ExecutorType:执行类型,ExecutorType主要有三 ...

  8. SQL JOIN的用法

    背景:(血的教训) 非常感谢能够有幸的去活力世纪面试,面试官非常的祥和,虽然最后没能够去成,但是非常的感谢,是他让我明白了自己还有很多需要去学习,每一次的面试不是为了去证明自己有多强,能拿多少的工资, ...

  9. js对话框5秒自动消失

    使用了easyui的对话框控件 <html> <head> <title>5秒后关闭对话框</title> <meta http-equiv=&q ...

  10. Codeforces Round #381 (Div. 2)C. Alyona and mex(思维)

    C. Alyona and mex Problem Description: Alyona's mother wants to present an array of n non-negative i ...