Добавление в событие window.onload?

Мне интересно, как добавить другой вызов метода в событие window.onload, как только он уже был назначен вызов метода.

Предположим, что где-то в script у меня есть это назначение...

 window.onload = function(){ some_methods_1() };

а затем в script у меня есть это назначение

 window.onload = function(){ some_methods_2() };

В его нынешнем виде будет вызываться только some_methods_2. Есть ли способ добавить к предыдущему обратному вызову window.onload без отмены some_methods_1? (а также без включения как some_methods_1(), так и some_methods_2() в тот же функциональный блок).

Я думаю, этот вопрос не о window.onload, а о javascript вообще. Я НЕ хочу что-то присваивать window.onload таким образом, что если бы другой разработчик работал над script и добавлял кусок кода, который также использует window.onload (не глядя на мой предыдущий код) он отключит мое событие onload.

Мне также интересно то же самое о

  $(document).ready()

в jquery. Как я могу добавить к нему, не разрушая то, что было раньше, или что может произойти после?

Ответы

Ответ 1

Если вы используете jQuery, вам не нужно ничего делать. Обработчики, добавленные с помощью $(document).ready(), не перезаписывают друг друга, а выполняют по очереди:

$(document).ready(func1)
...
$(document).ready(func2)

Если вы не используете jQuery, вы можете использовать addEventListener, как продемонстрировал Karaxuna, плюс attachEvent для IE < 9.

Обратите внимание, что onload не эквивалентно $(document).ready() - первый ожидает CSS, изображения... также, в то время как последний ожидает только дерева DOM. Современные браузеры (и IE с IE9) поддерживают DOMContentLoaded событие в документе, которое соответствует событию jQuery ready, но IE < 9 нет.

if(window.addEventListener){
  window.addEventListener('load', func1)
}else{
  window.attachEvent('onload', func1)
}
...
if(window.addEventListener){
  window.addEventListener('load', func2)
}else{
  window.attachEvent('onload', func2)
}

Если ни один из параметров не доступен (например, вы не имеете дело с узлами DOM), вы все равно можете это сделать (я использую onload в качестве примера, но для onload) доступны другие параметры:

var oldOnload1=window.onload;
window.onload=function(){
  oldOnload1 && oldOnload1();
  func1();
}
...
var oldOnload2=window.onload;
window.onload=function(){
  oldOnload2 && oldOnload2();
  func2();
}

или, чтобы избежать загрязнения глобального пространства имен (и, вероятно, столкновения с пространствами имен), используя шаблон импорта/экспорта IIFE:

window.onload=(function(oldLoad){
  return function(){
    oldLoad && oldLoad();
    func1();
  }
})(window.onload)
...
window.onload=(function(oldLoad){
  return function(){
    oldLoad && oldLoad();
    func2();
  }
})(window.onload)

Ответ 2

Вместо этого вы можете использовать attachEvent (ie8) и addEventListener

addEvent(window, 'load', function(){ some_methods_1() });
addEvent(window, 'load', function(){ some_methods_2() });

function addEvent(element, eventName, fn) {
    if (element.addEventListener)
        element.addEventListener(eventName, fn, false);
    else if (element.attachEvent)
        element.attachEvent('on' + eventName, fn);
}

Ответ 3

Есть в основном два пути

  • сохранить предыдущее значение window.onload, чтобы ваш код мог вызывать предыдущий обработчик, если он присутствует до или после выполнения кода

  • с использованием подхода addEventListener (конечно, Microsoft не любит и требует, чтобы вы использовали другое имя).

Второй способ даст вам немного больше безопасности, если другой script хочет использовать window.onload и делает это, не думая о сотрудничестве, но основное предположение для Javascript заключается в том, что все скрипты будут взаимодействовать, как вы пытаетесь сделать.

Обратите внимание, что плохой script, который не предназначен для работы с другими неизвестными сценариями, всегда сможет сломать страницу, например, путем возиться с прототипами, загрязняя глобальное пространство имен или повреждая dom.

Ответ 4

Это может быть не популярный вариант, но иногда сценарии в конечном итоге распространяются в разных кусках, в этом случае я нашел, что это быстрое исправление

if(window.onload != null){var f1 = window.onload;}
window.onload=function(){
    //do something

    if(f1!=null){f1();}
}

затем где-то еще...

if(window.onload != null){var f2 = window.onload;}
window.onload=function(){
    //do something else

    if(f2!=null){f2();}
}

это обновит функцию onload и цепь по мере необходимости