這兩個js有衝突嗎?
這兩個js同時放到一個頁面里的時候只能執行最後一個,單獨放一個都可以執行,f12也都沒有報錯,所以是兩個js衝突了嗎?怎麼解決呢?先謝謝大牛了。
a = 1;
a = 2;你說運行完 a 是多少?Window 的 onload 被第二個覆蓋掉了。可以嘗試 window.addEventListener("load", func...)
我也來回答一下吧。問題很小白,但是我也是剛從小白出來的(想到自己的痛處,心軟了...)。前面的如 @顧軼靈 和@Boring(@不到)說的很明白也很清楚,但是對於小白還是費解了一點。
這個還是基本功的原因,還是希望樓主多看一些基礎的書籍,這種問題在論壇里或者QQ群里是基本不會有人回答而且還會被調侃小白或者說你不願意去學習並且還是不會回答你問題的。我當時卻會為這樣的問題鬱悶上兩天。然後再去慢慢的找原因。
所以我想還是補充一下這個問題的答案。
以下是我的理解,不是專業書籍也不是專業語言。望輕噴。
原因:是因為同樣的函數你賦值(或者叫做綁定函數)了兩次,而這個函數是唯一的(在你這種寫法的情況下),所以會後面的賦值覆蓋了前面,自然只會執行後面的函數而且不會報錯。
也就是說window.onload這個函數你賦值了兩次。
這個東西大神也說過了,現成的如:
(截圖源於《鋒利的jQuery》第二版,如有侵權,請在評論中說明。)
問題回答完了。
現在解釋一下 @learnshare 的說法:
概念:頁面上任何一個元素的事件都是已經存在的,只是我們用的時候,拿來給我們想調用的事件賦值了一個函數(你上面貼出來的代碼)或者綁定了一個函數(就是我現在解釋的)。這兩張方式同樣可以達到目的,但是還是有一些區別的。比如window.onload事件,如果用綁定的方式寫,就不會衝突或者覆蓋。
具體到寫法上,還有兼容問題,這個我就不寫了,你找本書看看吧。
通過封裝一個通用函數,可以避免這個問題,只要添加事件處理程序的時候使用該函數,window.onload就不會被覆蓋。
function addLoadHandler(handler) {
var old = window.onload;
if (typeof window.onload === "function") {
window.onload = function () {
old();
handler();
}
} else {
window.onload = handler;
}
}
N首先,你這能用CSS完成絕大部分工作其次,你可以組織一個高一點層次的入口函數去管理你onload到底執行什麼,怎麼執行,可以通過傳入回調函數去擴展你的函數邏輯。這語言太靈活了,快去感受感受
只能有一個onload
window.onload = Fun1;
window.onload = Fun2;很明顯,把對象指向了新函數Fun2
utility.js function addOnloader(newFunc) {
if (typeof window.onload !== "function") {
window.onload = newFunc;
} else {
var previousOnload = window.onload;
window.onload = function() {
previousOnload();
newFunc();
};
}
}
window.util.addOnloader = addOnloader;
window.onload = function(){
a();
b();
}
function a(){
alert("a");
}
function b(){
alert("b")
}
你可以看下事件。直接使用onload,on等等的話後面定義會將前面覆蓋,就像顧軼靈說的一樣:a=1;a=2。所以事件綁定一般使用事件監聽addeventlisten函數,這樣就不會被覆蓋。
不僅僅是在同一個js文件里這樣寫有問題,就算是一個html頁面里引入多個js文件,如果有2個及其以上js文件里有window.onload都會出現衝突,也就是被最後一個window.onload覆蓋;原因:onload是window的對象;window.onload相當於被賦值多次;只有最後一次有用撒。
想要不覆蓋,可以用document.ready,onload就沒辦法了
推薦閱讀:
※svg 和 canvas在移動端的兼容性如何?尤其是在動畫方面。謝謝!?
※vw相比rem,在實際開發中究竟有多大區別?
※如何快速開發多端應用?
※Qt 5.7使用QWebEngine載入html做UI,但運行庫卻近70M,如何能減少體積?
※HTML5 實現錄音,然後上傳到伺服器,有現成方案嗎?
TAG:HTML | CSS | JavaScript | HTML5 | CSS3 |