Есть ли + = для window.onload в JavaScript?
недавно я придумал следующую проблему:
На моем веб-сайте во всех страницах HTML я вызываю функцию в теле onLoad событие:
<body onLoad="func1();">
Это - часть моего шаблона для HTML, таким образом, это появляется на каждой странице в моем сайте, и я не могу изменить это. Теперь, соглашение состоит в том, что на некоторых страницах, я должен вызвать некоторые другие функции onload, и я попробовал window.onload свойством, но оно вытирает вызов func1...
Я теперь, когда я могу просто сказать:
window.onload = func2(); //where func2() calls to func1()
но это кажется грязным и хромым?не так ли?
Так, есть ли способ добавить некоторые функции к тем, которые собираются быть выполненными onload, не удаляя старый? Кроме того, я использую asp.net, если это могло бы помочь...
Спасибо!
5 ответов
Вы можете использовать jQuery для цепочки обработчиков нагрузки. Многократное использование jQuery.load или jQuery (document) .ready свяжет ваши обработчики (я полагаю). Другой вариант - сделать это программно, что означает, что вам нужна вспомогательная функция, которая будет связывать ваши обработчики загрузки за вас. Вы можете сделать это с помощью закрытия (или анонимной функции):
var addOnLoadHandler = function(newHandler) {
if (typeof window.onload != 'function') {
window.onload = newHandler;
}
else {
var oldHandler = window.onload;
window.onload = function() {
if (oldHandler) {
oldHandler();
}
newHandler();
};
}
};
Однако вам придется связать ваши функции программно, поэтому вам нужно будет сделать:
addOnLoadHandlers(function() {
alert("Hi I am the first onLoad handler!");
});
addOnLoadHandlers(function() {
alert("Hi I am the second onLoad handler!");
});
в файле javascript (или в вашем файле html).
Другой подход - использовать массив:
var onloaders = new Array();
function runOnLoads() {
for (i = 0; i < onloaders.length; i++) {
try {
var handler = onloaders[i];
handler();
} catch(error) {
alert(error.message);
}
}
}
function addLoader(obj) {
onloaders[onloaders.length] = obj;
}
В вашем файле HTML или Javascript вы делаете:
addLoader(function() {
alert("Hi I am the first onLoad handler!");
});
addLoader(function() {
alert("Hi I am the second onLoad handler!");
});
Затем в своем HTML вы можете просто сделать
Вы можете извлечь максимум из анонимных функций:
function addLoadEvent(func) {
var oldonload = window.onload;
if (typeof window.onload != 'function') {
window.onload = func;
}
else {
window.onload = function() {
oldonload();
func();
}
}
}
Заимствовано из 10 лучших пользовательских функций JavaScript за все время .
рассматривали ли вы библиотеку javascript, такую как jquery, я знаю, что есть и другие подходы, но jquery сделает вашу жизнь намного проще ...
$(function(){
//Do stuff when DOM is loaded.
func1();
$('#link').click(function(){
//bind a click event
});
});
классический подход - просто прикрепить все свои функции внизу страницы :)
В jquery вы можете сделать
$(document).onload(function() {
// do something
}
// затем позже do
$(document).onload(function() {
// do something here too!
}
jQuery разумно добавит оба события в onload событие, и оба будут выполнены при загрузке страницы. С jQuery вы также получаете кроссбраузерную поддержку в качестве дополнительного бонуса.
В jQuery есть удобное сокращение для добавления нескольких определенных обработчиков к событию "готово" (не работает с анонимными функциями, в которых вы должны использовать $ (document) .ready (функция () {});).
просто
$(myFunction);
$(myFunction2);
Одно большое преимущество состоит в том, что если DOM уже загружен, он все равно запускается, тогда как все, что вы привязываете к window.onload после события, не вызывается.