解決 window.onload 被覆蓋的問題方法
更新時(shí)間：2020年01月14日 15:33:56 作者：madRain
這篇文章主要介紹了解決 window.onload 被覆蓋的問題方法，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
手頭在維護(hù)一個(gè)比較老的項(xiàng)目，由于頁面的重組，一些不同頁面的 js 被加載到了同一個(gè)頁面，導(dǎo)致一個(gè)頁面里可能有一個(gè)以上的 window.onload ，這樣做的后果就是前面的回調(diào)函數(shù)會(huì)被后面的覆蓋掉。
上網(wǎng)搜了一下，絕大部分的解決方案有兩種：
- 重載 window.onload 方法；
- 呼吁使用 window.addEventListener 。
這兩種方法要么只能預(yù)防，要么需要更改老代碼。我的情況比較特殊，老代碼是采用 webpack 打包過的，但是配置文件不見了，之前的維護(hù)人員直接修改了打包后的代碼，導(dǎo)致重新打包的工作量巨大，只能慢慢來。
思前想后，決定利用 Object.defineProperty 劫持 window.onload 的賦值行為，把對(duì)應(yīng)的回調(diào)函數(shù)放到一個(gè)隊(duì)列中集中處理。
代碼如下：
/**
* @function windowLoadInit - 劫持 window.onload 的賦值行為，防止覆蓋
* @desc 函數(shù)調(diào)用前產(chǎn)生的覆蓋不可逆轉(zhuǎn)
* @throw {Any} 所有回調(diào)執(zhí)行完畢之后，會(huì)拋出 catch 到的第一個(gè)錯(cuò)誤
* 錯(cuò)誤將被異步拋出，避免影響初始化函數(shù)的繼續(xù)執(zhí)行
* @return {Function}
*/
function windowLoadInit(){
const eventQueue = [];
// 防止覆蓋之前的 window.onload
window.onload instanceof Function && eventQueue.push(window.onload);
window.onload = e => {
const errQueue = [];
// 逐個(gè)處理回調(diào)事件
while(!!eventQueue.length){
try{
eventQueue.shift()(e);
} catch(err){
errQueue.push(err);
}
}
if(!!errQueue.length) {
setTimeout(() => {
throw errQueue.shift();
},0);
};
};
// 每次賦值時(shí)，將回調(diào)函數(shù)添加到隊(duì)列
Object.defineProperty(window, 'onload', {
set: eventQueue.push
});
return window.onload
}
測(cè)試代碼：
// 此 testCase 需在頁面加載完成前執(zhí)行
function testCase(){
const arr = [];
window.onload = () => arr.push(-1); // 這個(gè)回調(diào)的覆蓋不可避免
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
以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
您可能感興趣的文章:
- window.onload綁定多個(gè)事件的兩種解決方案
- window.onload使用指南
- 判斷window.onload是否多次使用的方法
- window.onload追加函數(shù)使用示例
- js window.onload 加載多個(gè)函數(shù)和追加函數(shù)詳解
- 淺析document.ready和window.onload的區(qū)別講解
- JS:window.onload的使用介紹
- window.onload和$(function(){})的區(qū)別介紹
- 在chrome中window.onload事件的一些問題
- jquery中的$(document).ready()與window.onload的區(qū)別
- js window.onload 加載多個(gè)函數(shù)的方法
相關(guān)文章
這篇文章主要介紹了JavaScript邏輯And運(yùn)算符，在JavaScript中，邏輯 AND 運(yùn)算符用雙和號(hào)（&&）表示2015-12-12
在開發(fā)中，數(shù)組的使用場景非常多，平日中也涉及到很多數(shù)組的api/相關(guān)操作，一直也沒有對(duì)這塊內(nèi)容進(jìn)行一塊整理總結(jié)，很多時(shí)候就算用過幾次這個(gè)api，在開發(fā)中也很容易忘記，還是要谷歌一下2018-06-06
javascript實(shí)現(xiàn)動(dòng)態(tài)導(dǎo)入js與css等靜態(tài)資源文件的方法
這篇文章主要介紹了javascript實(shí)現(xiàn)動(dòng)態(tài)導(dǎo)入js與css等靜態(tài)資源文件的方法,基于回調(diào)函數(shù)實(shí)現(xiàn)該功能,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-07-07
這篇文章主要介紹了JavaScript 對(duì)象不變性，對(duì)象不變性在任何編程語言中都是一個(gè)重要的概念。它會(huì)限制對(duì)象修改并防止不需要的更改。簡而言之，對(duì)象的不變性就是將它的狀態(tài)變?yōu)橹蛔x的下面詳細(xì)內(nèi)容，需要的小伙伴可以參考一下2022-02-02
Bootstrap模態(tài)對(duì)話框用法簡單示例
這篇文章主要介紹了Bootstrap模態(tài)對(duì)話框用法,結(jié)合實(shí)例形式分析了Bootstrap模態(tài)對(duì)話框的簡單創(chuàng)建與使用操作技巧,需要的朋友可以參考下2018-08-08
webpack拆分壓縮css并以link導(dǎo)入的操作步驟
我們運(yùn)行打包后會(huì)發(fā)現(xiàn)less轉(zhuǎn)為了css文件，但css文件確通過js加入style標(biāo)簽，下面我們將css進(jìn)行拆分出來，并以link標(biāo)簽引入，具體實(shí)現(xiàn)步驟一起看看吧2021-10-10
這篇文章主要介紹了嵌入式iframe子頁面與父頁面js通信的方法,實(shí)例分析了嵌入式iframe子頁面與父頁面js通信的常用技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-01-01
微信小程序?qū)崿F(xiàn)計(jì)時(shí)器開始和結(jié)束功能
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)計(jì)時(shí)器開始和結(jié)束功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-07-07
javascript實(shí)現(xiàn)數(shù)組內(nèi)值索引隨機(jī)化及創(chuàng)建隨機(jī)數(shù)組的方法
這篇文章主要介紹了javascript實(shí)現(xiàn)數(shù)組內(nèi)值索引隨機(jī)化及創(chuàng)建隨機(jī)數(shù)組的方法,涉及javascript數(shù)組索引及隨機(jī)數(shù)的相關(guān)實(shí)現(xiàn)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-08-08
這篇文章主要為大家詳細(xì)介紹了JavaScript如何生成臨時(shí)鏈接的相關(guān)知識(shí),文中的示例代碼講解詳細(xì),具有一定的借鑒價(jià)值,有需要的小伙伴可以參考下2024-02-02