Рекомендуется использовать window.события onload

Я разрабатываю веб-сайты/компоненты/модули и плагины Joomla, и каждый раз мне требуется возможность использовать JavaScript, который запускает событие при загрузке страницы. Большую часть времени это делается с помощью .

мой вопрос:

  1. это лучший способ вызвать события JavaScript при загрузке страницы или есть лучший/более новый способ?
  2. если это единственный способ вызвать событие при загрузке страницы, каков наилучший способ убедиться, что несколько событий могут выполняться разными сценариями?
37
javascript joomla joomla1.5 onload

7 ответов

window.onload = function(){}; работает, но как вы могли заметить, это позволяет указать только 1 слушателя.

Я бы сказал, что лучший / новый способ сделать это - использовать фреймворк или просто использовать простую реализацию native addEventListener и attachEvent (для IE) методы, которые позволяют удалить слушатели для событий, а также.

вот кросс-браузерная реализация:

// Cross-browser implementation of element.addEventListener()
function listen(evnt, elem, func) {
    if (elem.addEventListener)  // W3C DOM
        elem.addEventListener(evnt,func,false);
    else if (elem.attachEvent) { // IE DOM
         var r = elem.attachEvent("on"+evnt, func);
         return r;
    }
    else window.alert('I\'m sorry Dave, I\'m afraid I can\'t do that.');
}

// Use: listen("event name", elem, func);

для окна.случае события onload использовать: listen("load", window, function() { });

редактировать Я хотел бы расширить свой ответ, добавив драгоценную информацию, на которую указывали другие.

о DOMContentLoaded (Mozilla, Opera и WebKit nightlies в настоящее время поддерживают это) и onreadystatechange (для IE) событий который может быть применен к документ объект, чтобы понять, когда документ доступен для манипулирования (не дожидаясь всех изображения / таблицы стилей etc.. нагружаться.)

существует много "хакерских" реализаций для поддержки кросс-браузеров, поэтому я настоятельно рекомендую использовать фреймворк для этой функции.

44

окне.события onload переопределяются для нескольких творений. Для добавления функций используйте окно.addEventListener (стандарт W3C) или окно.attachEvent(для IE). Используйте следующий код, который работал. 

if (window.addEventListener) // W3C standard
{
  window.addEventListener('load', myFunction, false); // NB **not** 'onload'
} 
else if (window.attachEvent) // Microsoft
{
  window.attachEvent('onload', myFunction);
}
10

современные фреймворки javascript представили идею события" документ готов". Это событие будет запущено, когда документ будет готов к выполнению манипуляций DOM. Событие "onload" запускается только после загрузки всего, что есть на странице.

наряду с событием "document ready" фреймворки предоставили способ очереди нескольких битов кода Javascript и функций для запуска при возникновении события.

Итак, если вы против фреймворки, лучший способ сделать это-реализовать свой собственный документ.очередь событий onload.

Если вы не против фреймворков, то вам захочется заглянуть в jQuery и документ.готов, Prototype и dom: loaded, Dojo и addOnLoad или Google для [структуры] и "документ готов",.

Если вы не выбрали фреймворк, но заинтересованы, jQuery-хорошее место для начала. Это не меняет ядро Javascript функциональность, и, как правило, держаться подальше от вашего пути и позволить вам делать то, что вам нравится, когда вы хотите.

10

Joomla поставляется с MooTools, поэтому вам будет проще использовать библиотеку MooTools для дополнительного кода. MooTools поставляется с пользовательским событием domready, которое срабатывает при загрузке страницы и анализе дерева документов.

window.addEvent( domready, function() { code to execute on load here } );

более подробную информацию о MooTools можно найти здесь. Joomla 1.5 в настоящее время поставляется с MT1.1 в то время как Joomla 1.6 alpha будет включать MT1.2

2

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

1

это грязный, но более короткий путь: P

function load(){
   *code*
}

window[ addEventListener ? 'addEventListener' : 'attachEvent' ]
( addEventListener ? 'load' : 'onload', function(){} )
1

поскольку я всегда включаю jQuery / bootstrap JS-файлы в нижней части документа и не имею доступа к $ над документом я разработал крошечный плагин "init", который является одним и единственным сценарием JS, который я включаю в верхней части своих страниц:

window.init = new function() {
    var list = [];

    this.push = function(callback) {
        if (typeof window.jQuery !== "undefined") {
            callback();
        } else {
            list.push(callback);
        }
    };

    this.run = function() {

        if (typeof window.jQuery !== "undefined") {
            for(var i in list) {
                try {
                    list[i]();
                } catch (ex) {
                    console.error(ex);
                }
            }
            list = [];
        }
    };

    if (window.addEventListener) {
        window.addEventListener("load", this.run, false);
    } else if (window.attachEvent) {
        window.attachEvent("onload", this.run);
    } else {
        if (window.onload && window.onload !== this.run) {
            this.push(window.onload);
        }
        window.onload = this.run;
    }
};

используя это, я могу определить любой анонимный загрузчик на странице, перед включением jQuery и bootstrap и быть уверенным, что он сработает, как только jQuery присутствует:

init.push(function() {

    $('[name="date"]').datepicker({
        endDate: '0d',
        format: 'yyyy-mm-dd',
        autoclose: true
    }).on('hide', function() {
        // $.ajax
    });

    $('[name="keyword_id"]').select2();
});
0