在一个页面中有两个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. golang struct组合,转型问题请教

    type Action interface { OnHurt2(other Action) GetDamage() int } type Base struct { atk, hp int } fun ...

  2. Telegram Groups vs Telegram Channels

    Telegram Groups vs Telegram Channels By Iaroslav Kudritskiy  Unlike other messaging apps, using Tele ...

  3. Centos7服务器环境搭建

    1.Apache安装 yum install httpd systemctl start httpd.service #启动 systemctl stop httpd.service#停止 syste ...

  4. POJ2594 Treasure Exploration【DAG有向图可相交的最小路径覆盖】

    题目链接:http://poj.org/problem?id=2594 Treasure Exploration Time Limit: 6000MS   Memory Limit: 65536K T ...

  5. Java包的基本概述

    第七章 7.1 包的基本概述 起因: 在我们设计一个程序的时候(尤其是多人合作),会写一些类来实现功能,但是往往会有重名的现象发生,为了解决这个问题,则专门设计了包.(还有其他作用,下述) 简单理解: ...

  6. HanLP分词工具中的ViterbiSegment分词流程

    本篇文章将重点讲解HanLP的ViterbiSegment分词器类,而不涉及感知机和条件随机场分词器,也不涉及基于字的分词器.因为这些分词器都不是我们在实践中常用的,而且ViterbiSegment也 ...

  7. Nginx03---重装

    1.先执行一下命令 1.1 删除nginx,–purge包括配置文件 sudo apt-get --purge remove nginx 1.2 自动移除全部不使用的软件包 sudo apt-get ...

  8. SQL SERVER 根据字段名称批量设置为主键

    --设置主键 --alter table 你的表名 add constraint pk_s primary key (id) SELECT 'alter table ' + TABLE_NAME + ...

  9. pymysql连接和操作Mysql数据库

    pymysql 一.概要 PyMySQL 是在 Python3.x 版本中用于连接 MySQL 服务器的一个库, 二.PyMySQL 安装 pip install pymysql 三.操作流程 创建c ...

  10. Kubernetes---Pod笔记

    ⒈pod的理解     将多个容器镜像融合在一起,共享网络命名空间及容器卷 ⒉pod的分类 自助式podv          不是被控制器管理的pod,它一旦死亡不会被人给拉起来. 控制器管理的pod ...