解决 window.onload 被覆盖的问题方法_javascript技巧

来源:脚本之家  责任编辑:小易  

我猜测你的aaaa()是表单验证函数,有submit()方法。然后希望在window.onload时调用一次aaaa(),用return false阻止继续执行,然而结果却是进入了死循环,是吗?如果是这样的,那么是因为每次submit时都会刷新网页,因此.会再次调用aaaa(),其实return false是起了作用的。而onclick事件只有在你点击按钮才能执行,刷新网页不会执行,其实这两个return false都是执行到了的。如果是其他原因,就要看你的部分代码分析了www.zgxue.com防采集请勿采集本网。

手头在维护一个比较老的项目,由于页面的重组,一些不同页面的 js 被加载到了同一个页面,导致一个页面里可能有一个以上的 window.onload ,这样做的后果就是前面的回调函数会被后面的覆盖掉。

如果先前已近有了一个window.onload=function(){};在这样定义就会覆盖掉原来的,所以addLoadEvent做个判断,如果已经定义过则加进去一个,没有定义则重新定义一个

上网搜了一下,绝大部分的解决方案有两种:

    重载 window.onload 方法; 呼吁使用 window.addEventListener 。

在html页面中某段js中调用了window.onload=function test1(){},同时在页面上又有();语句, 这将会导致window.onload事件覆盖body onload事件,导致body onload事件无效. 解决方法: 第一:

这两种方法要么只能预防,要么需要更改老代码。我的情况比较特殊,老代码是采用 webpack 打包过的,但是配置文件不见了,之前的维护人员直接修改了打包后的代码,导致重新打包的工作量巨大,只能慢慢来。

window.onload的意思是:事件会在页面加载完成后触发。例如: doctype html> window.onload示例 window.onload=function(){ alert('页面加载完成');} alert('页面尚未加载完成,页面

思前想后,决定利用 Object.defineProperty 劫持 window.onload 的赋值行为,把对应的回调函数放到一个队列中集中处理。

window.onload=function(){/注意,这里可以没有函数名 } onload是当窗口加载完成后运行。如果直接写var a=2;是当页面加载到这个位置的时候就执行了,这时候后面的内容还没有加载,所以可能会出

代码如下:

Window.onload=function(){/代码 } 等价于 Jquery 代码如下: (window).load(function(){/代码 });执行时机 window.load—必须等待网页中所有的内容加载完毕后(包括图片)才能执行 (document).ready()—

/** * @function windowLoadInit - 劫持 window.onload 的赋值行为,防止覆盖 * @desc 函数调用前产生的覆盖不可逆转 * @throw {Any} 所有回调执行完毕之后,会抛出 catch 到的第一个错误 * 错误将被异步抛出,避免影响初始化函数的继续执行 * @return {Function} */function windowLoadInit(){ const eventQueue = []; // 防止覆盖之前的 window.onload window.onload instanceof Function && eventQueue.push(window.onload); window.onload = e => { const errQueue = []; // 逐个处理回调事件 while(!!eventQueue.length){ try{ eventQueue.shift()(e); } catch(err){ errQueue.push(err); } } if(!!errQueue.length) { setTimeout(() => { throw errQueue.shift(); },0); }; }; // 每次赋值时,将回调函数添加到队列 Object.defineProperty(window, 'onload', { set: eventQueue.push }); return window.onload}

测试代码:

// 此 testCase 需在页面加载完成前执行function testCase(){ const arr = []; window.onload = () => arr.push(-1); // 这个回调的覆盖不可避免 window.onload = () => arr.push(0); windowLoadInit(); window.onload = () => arr.push(1); window.onload = () => arr.push(2); return new Promise(resolve => { window.onload = () => resolve(arr.join('') === '012') })}testCase().then(console.log); // true

第一:看这2个方法的关联性,哪个先,哪个后,然后放到同一个onload里面去,顺序一致第二:为什么要写2个onload呢?你可以这么写,据说效率很高,放到js文件里,如同onloadvoid function(){/TODO}();或者(function(){/TODO}());内容来自www.zgxue.com请勿采集。


  • 本文相关:
  • window.onload绑定多个事件的两种解决方案
  • window.onload使用指南
  • 判断window.onload是否多次使用的方法
  • window.onload追加函数使用示例
  • js window.onload 加载多个函数和追加函数详解
  • 浅析document.ready和window.onload的区别讲解
  • js:window.onload的使用介绍
  • window.onload和$(function(){})的区别介绍
  • 在chrome中window.onload事件的一些问题
  • jquery中的$(document).ready()与window.onload的区别
  • js window.onload 加载多个函数的方法
  • js统计页面上每个标签的数量实例代码
  • 深入php面向对象、模式与实践
  • moment.js轻松实现获取当前日期是当年的第几周
  • javascript sort数组排序方法和自我实现排序方法小结
  • window.addeventlistener来解决让一个js事件执行多个函数
  • js 事件对象 鼠标滚轮效果演示说明
  • js实现的页面加载完毕之前loading提示效果完整示例【附demo源码下
  • 微信小程序实现点击按钮移动view标签的位置功能示例【附demo源码
  • 用javascript动态调整iframe高度的代码
  • 基于javascript将表单序列化类型的数据转化成对象的处理(允许对
  • 两个window.onload如何解决
  • javascript 的window.onload方法
  • javascript中window.onload和body onload怎么解决啊!!!
  • 为什么加上window.onload反而不行了~
  • JavaScript中关于window.onload的用法
  • 在html中使用window.onload和onload的区别
  • javascript 里面的 window.onload是什么意思?
  • JavaScript window.onload的使用问题
  • js的 window.load 和window.onload 有什么区别
  • 如何把window.onload改为document.ready
  • 网站首页网页制作脚本下载服务器操作系统网站运营平面设计媒体动画电脑基础硬件教程网络安全基础知识javascript类库表单特效广告代码网页特效黑客性质javascript技巧domnode.jsjs其它首页javascriptjavascript技巧window.onload绑定多个事件的两种解决方案window.onload使用指南判断window.onload是否多次使用的方法window.onload追加函数使用示例js window.onload 加载多个函数和追加函数详解浅析document.ready和window.onload的区别讲解js:window.onload的使用介绍window.onload和$(function(){})的区别介绍在chrome中window.onload事件的一些问题jquery中的$(document).ready()与window.onload的区别js window.onload 加载多个函数的方法js统计页面上每个标签的数量实例代码深入php面向对象、模式与实践moment.js轻松实现获取当前日期是当年的第几周javascript sort数组排序方法和自我实现排序方法小结window.addeventlistener来解决让一个js事件执行多个函数js 事件对象 鼠标滚轮效果演示说明js实现的页面加载完毕之前loading提示效果完整示例【附demo源码下微信小程序实现点击按钮移动view标签的位置功能示例【附demo源码用javascript动态调整iframe高度的代码基于javascript将表单序列化类型的数据转化成对象的处理(允许对js刷新页面方法大全js中settimeout()的用法详解js截取字符串常用方法详细整理js页面跳转常用的几种方式js打开新窗口的2种方式js数组与字符串的相互转换方法js设置cookie、读取cookie、删除js 将json字符串转换为json对象的javascript深入理解js闭包js删除数组里的某个元素方法three.js基础部分学习javascript实现多态和继承的封装操作示例js通过cookie判断页面是否为首次打开js确定对象类型方法script的加载方法小结js鼠标点击图片实现随机变换图片的方法jsonp跨域请求js实现youku的漂亮搜索框效果如何动态加载外部javascript文件javascript实现正则去除a标签并保留内容的
    免责声明 - 关于我们 - 联系我们 - 广告联系 - 友情链接 - 帮助中心 - 频道导航
    Copyright © 2017 www.zgxue.com All Rights Reserved