Есть ли + = для window.onload в Javascript? - PullRequest
Новая
       7

Есть ли + = для window.onload в Javascript?

9 голосов
/ 17 февраля 2010

недавно у меня возникла следующая проблема:

На моем веб-сайте на всех html-страницах я вызываю функцию в теле события onLoad: 

<body onLoad="func1();">

Это часть моего шаблона для html, поэтому он появляется на каждой странице моего сайта, и я не могу это изменить. Дело в том, что на некоторых страницах мне нужно вызывать некоторые другие функции onload, и я попытался использовать свойство window.onload, но оно стирает вызов func1 ...

Теперь я могу сказать: 

window.onload = func2(); //where func2() calls to func1()

но это кажется грязным и хромым? Не так ли?

Итак, есть ли способ добавить некоторые функции к тем, которые будут выполняться при загрузке, без удаления старой? Кроме того, я использую asp.net, если это может помочь ...

Спасибо!

Ответы [ 5 ]

19 голосов
/ 17 февраля 2010

Вы можете использовать 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 вы можете просто сделать <body onload="runOnLoads()">

5 голосов
/ 17 февраля 2010

У jQuery есть приятное сокращение для добавления нескольких определенных обработчиков к событию «ready» (не работает с анонимными функциями, где вы должны использовать $ (document) .ready (function () {});).

просто 

$(myFunction);
$(myFunction2);

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

5 голосов
/ 17 февраля 2010

Вы можете использовать лучшие функции анонимных функций: 

function addLoadEvent(func) {
    var oldonload = window.onload;
    if (typeof window.onload != 'function') {
        window.onload = func;
    }
    else {
        window.onload = function() {
            oldonload();
            func();
        }
    }
}

Заимствовано из 10 лучших пользовательских функций JavaScript всех времен .

3 голосов
/ 17 февраля 2010

В JQuery вы можете сделать 

$(document).onload(function() {
  // do something
}

// потом сделаем 

$(document).onload(function() {
  // do something here too!
}

jQuery будет интеллектуально добавлять оба события в событие onload, и оба будут выполняться при загрузке страницы. С jQuery вы также получаете поддержку кроссбраузера в качестве дополнительного бонуса.

3 голосов
/ 17 февраля 2010

рассматривали ли вы библиотеку javascript, такую ​​как jquery, я знаю, что есть другие подходы, но jquery сделает вашу жизнь намного проще ... 

$(function(){
   //Do stuff when DOM is loaded.
   func1();
    $('#link').click(function(){
        //bind a click event
    });
});

Классический подход - просто прикрепить все свои функции внизу страницы:)

...