共享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 ...
随机推荐
- 【转载】ANSYS TRANSIENT ANSLYSIS [2]
原文地址:http://sps.utm.my/wp-content/uploads/2014/12/ANSYS-day2-Transient-analysis.pdf
- Nginx 配置 HTTP 强缓存
server { listen 80; server_name tirion.me www.tirion.me; # note that these lines are originally from ...
- LeetCode-Remove Duplicates from Sorted Array II
Follow up for "Remove Duplicates": What if duplicates are allowed at most twice? For examp ...
- 原生js发送ajax请求
堕落了一阵子了,今天打开博客,发现连登录的用户名和密码都不记得了.2016年已过半,不能再这么晃荡下去了. 参加了网易微专业-前端攻城狮 培训,目前进行到大作业开发阶段,感觉举步维艰.但是无论如何,不 ...
- FreeBSD Opera Flash问题
环境:FreeBSD 10,Opera,kldload linux 有些地方还是需要 flash 阿,但按照 Handbook 里面安装了 linux-f10-flashplugin11 和 oper ...
- MyFirstgame 拼图
package auto; /** * IDA*求解15puzzle问题 * IDA*整合了IDDFS和A*算法.其中IDDFS控制了求解过程中的内存开销,A*算法意味着"启发式" ...
- 依赖注入 – ASP.NET MVC 4 系列
从 ASP.NET MVC 3.0 开始就引入了一个新概念:依赖解析器(dependence resolver).极大的增强了应用程序参与依赖注入的能力,更好的在 MVC 使用的服务和创 ...
- 一般处理程序上传文件(html表单上传、aspx页面上传)
html 表单上传文件 一般处理程序由于没有 apsx 页面的整个模型和控件的创建周期,而比较有效率.这里写一个用 html 表单进行文件上传的示例. 1. 表单元素选用 ...
- Unity浅析
在分析PRISM项目的时候, 发现里面用到了Unity 这个Component, 主要用于依赖注入的.由于对其不熟悉,索性分析了一下,记载在此,以作备忘. 任何事物的出现,总有它独特的原因,Unity ...
- NetflixOSS:Hollow正式发布
http://www.infoq.com/cn/articles/netflixoss-hollow-officially-released "如果你能 非常有效地 缓存 一切 ,那么通 ...