共享onload事件
在做前端工作中,我们想要设置某个函数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事件的更多相关文章
- 原生javascript 共享onload事件
在工作时,我们给一个元素绑定了事件,如果dom还没加载完成,就执行了js代码,就不会绑定成功.常规解决方案就是用: window.onload = EventFunction; 可是如果有两个 事件, ...
- js共享onload事件
问题:通过js进行事件绑定,必须在HTML文档加载完成后再执行js脚本,否则可能因DOM不完整导致无法完成预计的效果,但对于不同的需求如何选用最佳的实现方式呢,这里做了整理,可以做参考. 一.对于小型 ...
- 利用 onload 事件监控跨站资源
用过 CSP 的都很郁闷,上报的只有违规的站点名,却没有具体路径.这是缺陷,还是特意的设计? 显然,CSP 是为安全定制的,里面的规范自然要严格制定,否则就会带来新的安全问题.如果支持详细路径的上报, ...
- 【XSS】利用 onload 事件监控流量劫持
说到跨站资源监控,首先会联想到『Content Security Policy』.既然 CSP 好用,我们何必自己再搞一套呢.那就先来吐槽下 CSP 的缺陷. 目前的 CSP 日志不详细 用过 CSP ...
- JavaScript 中 onload 事件绑定多个方法
当需要调用的方法较多时,我们可以进一步优化,编写一个专门用于绑定 onload事件的方法: function addLoadEvent(func) { //把现有的 window.onload 事件处 ...
- jQuery $(document).ready()和JavaScript onload事件
jQuery $(document).ready()和JavaScript onload事件 Why we need a right time? 对元素的操作和事件的绑定需要等待一个合适的时机,可以看 ...
- onload事件-----addLoadEvent函数
在给网页加一些特效时经常要在<body>中加入“onload”事件,即在网页加载完后执行某事件,例如:<body onload=”alert(‘欢迎光临!')”,但这样做有个大的缺陷 ...
- javascript中onload事件如何绑定及执行顺序
onload事件,顾名思义就是为了js程序能够在网页加载成功过后进行执行.对于放在head里面的js来说,非常必要. 如何给网页绑定onload,主要有三种方式: window.onload=func ...
- jQuery的document ready与 onload事件——你真的思考过吗?
在进行实验和资料查询时,我遇到了几个关键问题: 1. window.onload到底是什么加载完触发? 2. body为什么会有onload事件? 3. 为什么是window.onload,而不是do ...
随机推荐
- css实现自适应屏幕高度;
css实现自适应屏幕高度: <!DOCTYPE html><html lang="en"><head> <meta charset=&qu ...
- Legacy Notes网络和服务端配置的笔记
在云服务器上使用LAMP全过程: 第一步:传文件 在windows上下载winscp,连接使用scp协议.注意:centos需要安装scp yum install openssh-clients 即可 ...
- jQuery获取多种input值的方法
1 if($("input[name=item][value='val']").attr('checked')==true) //判断是否已经打勾 name即控件name属性,va ...
- Linux LVM硬盘管理之一:概念介绍
一.LVM概念介绍: LVM是 Logical Volume Manager(逻辑卷管理)的简写,它由Heinz Mauelshagen在Linux 2.4内核上实现.LVM将一个或多个硬盘的分区在逻 ...
- 使用扩展方法将DataTable转换为List<T>
在将DataTable转换为List<T>时,找到了网上的方案,原文链接:http://stackoverflow.com/questions/4593663/fetch-datarow- ...
- .NET操作Xml类
using System; using System.Collections.Generic; using System.Text; using System.Data; using System.I ...
- MyBatis原理分析之三:初始化(配置文件读取和解析)
1. 准备工作 编写测试代码(具体请参考<Mybatis入门示例>),设置断点,以Debug模式运行,具体代码如下: )ExecutorType:执行类型,ExecutorType主要有三 ...
- SQL JOIN的用法
背景:(血的教训) 非常感谢能够有幸的去活力世纪面试,面试官非常的祥和,虽然最后没能够去成,但是非常的感谢,是他让我明白了自己还有很多需要去学习,每一次的面试不是为了去证明自己有多强,能拿多少的工资, ...
- js对话框5秒自动消失
使用了easyui的对话框控件 <html> <head> <title>5秒后关闭对话框</title> <meta http-equiv=&q ...
- 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 ...