在一个页面中有两个JavaScript 分别都用到了window.onload

一个是:window.onload=func1,另一个是:window.onload=func2 这样就造成了一个JavaScript 运行不了。

方案一:

window.onload=function(){func1();func2();}

方案二:

用window.attachEvent和 window.addEventListener来解决问题了

window.addEventListener("load",调用函数名,false);//对于FireFox
window.attachEvent("onload",调用函数名)//对于IE

方案三

function addLoadEvent(func){
var oldonload = window.onload; //把现在有window.onload事件处理函数的值存入变量oldonload。
if(typeof window.onload != 'function'){ //如果这个处理函数还没有绑定任何函数,就像平时那样把新函数添加给它
window.onload = func;
}else{ //如果在这个处理函数上已经绑定了一些函数。就把新函数追加到现有指令的末尾
window.onload = function(){
oldonload();
func();
}
} }
addLoadEvent(num1);
addLoadEvent(num2);

如果有人接下来的js写了一个加载事件:

window.onload = function(){ console.log('最后再来个页面加载函数')} 

结果妥妥的被覆盖了,只会执行最后一个window.load的内容,因此方案三不可取

推荐使用现代浏览器事件绑定 方案二。

原生js中如果有多个onload事件解决方案的更多相关文章

  1. 原生JS中apply()方法的一个值得注意的用法

    今天在学习vue.js的render时,遇到需要重复构造多个同类型对象的问题,在这里发现原生JS中apply()方法的一个特殊的用法: var ary = Array.apply(null, { &q ...

  2. 原生js中slice()方法和splice()区别

    slice()方法和splice()方法都是原生js中对数组操作的方法. slice(),返回一个新的数组,该方法可从已有的数组中返回选定的元素.例如:arrObject(start,end),sta ...

  3. ThinkPHP 中使用 IS_AJAX 判断原生 JS 中的 Ajax 出现问题

    问题: 在 ThinkPHP 中使用原生 js 发起 Ajax 请求的时候.在控制器无法使用 IS_AJAX 进行判断.而使用 jQuery 中的 ajax 是没有问题的. 在ThinkPHP中.有一 ...

  4. 【温故知新】——原生js中常用的四种循环方式

    一.引言 本文主要是利用一个例子,讲一下原生js中常用的四种循环方式的使用与区别: 实现效果: 在网页中弹出框输入0   网页输出“欢迎下次光临” 在网页中弹出框输入1   网页输出“查询中……” 在 ...

  5. 关于原生js中函数的三种角色和jQuery源码解析

    原生js中的函数有三种角色: 分两大种: 1.函数(最主要的角色)2.普通对象(辅助角色):函数也可以像对象一样设置属于本身的私有属性和方法,这些东西和实例或者私有变量没有关系两种角色直接没有必然的关 ...

  6. koa 基础(十七)原生 JS 中的类、静态方法、继承

    1.app.js /** * 原生 JS 中的类.静态方法.继承 * es5中的类和静态方法 */ function Person(name, age) { // 构造函数里面的方法和属性 this. ...

  7. 【面试篇】寒冬求职季之你必须要懂的原生JS(中)

    互联网寒冬之际,各大公司都缩减了HC,甚至是采取了“裁员”措施,在这样的大环境之下,想要获得一份更好的工作,必然需要付出更多的努力. 一年前,也许你搞清楚闭包,this,原型链,就能获得认可.但是现在 ...

  8. 原生js中stopPropagation,preventDefault,return false的区别

    1.stopPropagation:阻止事件的冒泡,但不阻止事件的默认行为. 最好莫过于用例子说明: <div id='div'  onclick='alert("div") ...

  9. 原生js中获取this与鼠标对象以及vue中默认的鼠标对象参数

    1.通过原生js获取this对象 <!DOCTYPE html> <html> <head> <meta charset="utf-8" ...

随机推荐

  1. 三小时攻克 Kubernetes!

    我保证本文是最详尽的 Kubernetes 技术文档,从我在后台排版了这么漫长的时间就能看出来.废话不多说——牢牢占据容器技术统治地位的 Kubernetes,其重要性想必不言而喻. 以下为译文: 为 ...

  2. 记录一下自己安装Appium的流程

    跟着其他大佬的安装攻略,一步一步来的.过程中遇到了一些问题,也都解决了~ 需要准备的东西: 1.JDK1.8 2.Andriod SDK 3.Node.js 4.Python 5.Appium-pyt ...

  3. vscode插件Project Manager

    参考链接:https://www.jianshu.com/p/b11532b91414

  4. GxDlms编译

    目录 GxDlms编译 title: GxDlms编译 date: 2019/12/5 13:36:37 toc: true --- GxDlms编译 C++版本如果要编译动态库,项目>属性需要 ...

  5. Windows下直接双击可执行的jar

    如果没有设置,那么就是用命令行: jar处在文件夹路径下打开命令行:java -jar xxx.jar 总的来说是有点不方便 首先默认打开jar程序得是相同jdk的java.exe 然后是一闪而过 下 ...

  6. CDH6.2的spark访问oss

    CDH6配置oss后:spark的配置 /opt/cloudera/parcels/CDH-6.2.0-1.cdh6.2.0.p0.967373/jars/opt/cloudera/parcels/C ...

  7. [转帖]被HTTP/2漏洞拖累,所有Kubernetes版本受影响

    被HTTP/2漏洞拖累,所有Kubernetes版本受影响 https://www.kubernetes.org.cn/5746.html 服务很重要啊... 低版本都不解决安全问题了.. 不过HTT ...

  8. (十二)mybatis 查询缓存

    目录 什么是查询缓存 图解查询缓存 一级缓存 二级缓存 禁用二级缓存 刷新缓存 二级缓存应用场景 二级缓存局限性 什么是查询缓存 mybatis 在查询数据的时候,会将数据存储起来,下次再次查询相同的 ...

  9. docker-compose搭建elasticsearch+kibana环境,以及php使用elasticsearch

    一.elasticsearch的Dockerfile 增加中文搜索插件analysis-ik FROM docker.elastic.co/elasticsearch/elasticsearch:7. ...

  10. thinkphp5分页查询paginate()传递参数

    使用paginate()分页,我这里实现的是搜索后分页显示,翻页后传递搜索关键字 www.demo.com/home/search/?k=搜索关键字&page=2 搜索分页源码在: think ...