Какое событие я должен зарегистрировать в DOM Update с помощью Internet Explorer - PullRequest
Новая
       17

Какое событие я должен зарегистрировать в DOM Update с помощью Internet Explorer

0 голосов
/ 02 сентября 2011

Фон

Я разрабатываю букмарклет, который зависит от сторонних библиотек, которые будут загружены в DOM, прежде чем мой скрипт букмарклета сможет работать.Суть проблемы, с которой я сталкиваюсь, - это цепочка зависимостей, которую мне нужно подождать, прежде чем я смогу отреагировать, и у меня возникают проблемы, заставляющие ее работать в IE.

Я не могу быть уверен, что JQuery дажена странице на этом этапе.Это то, что я проверяю, и если его там нет, тогда мне нужно создать и внедрить это в DOM.

Поток управления выглядит примерно так:

  1. Загрузите основную библиотеку (jquery) в DOM, я подключил прослушиватель событий, который можно активировать, когда он действительно находится в DOM. 

    var e = document.createElement('script');
e.type = 'text/javascript';
e.src = http:// ... jquerylibrary.js
e.addEventListener('load', callback);

  2. Настройка функции обратного вызова 

    var callback = function() {
    //my stuff that wants to use jquery
}

Это работает и работает хорошо.Я могу связать jquery, некоторые плагины jquery, затем мой код, а затем я могу быть уверен, что когда мой код будет запущен (в реальном браузере), он запустится.

Суть проблемы

Когда IE> 9 (который мы должны поддерживать) имеет аналогичную функцию ... attachEvent('onload',callback);

Это похоже, но не работает правильно, когда элементы DOMобновлено.Просматривая длинный список событий MSDN , не ясно, является ли какое-либо из этих событий тем, что я ищу.

Какое событие IE 7+ запускает при обновлении DOM?

1 Ответ

1 голос
/ 02 сентября 2011

Я понял это после прочтения источника head.js . Это требует немного творческого волшебства JavaScript.

Интересующие нас события: onreadystatechange и onload. Вы можете прикрепить к ним пользовательскую функцию для запуска уведомлений об обновлениях, когда они вставляются на страницу.

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

function loadElement(e, callback) {
    if ( typeof(callback) === 'function' ) { 
        e.onreadystatechange = e.onload = function() {
            var state = e.readyState;

            if ( !callback.done && (!state || /loaded|complete/.test(state)) ) { 
                callback.done = true;
                callback();
            }   
        }   
    }   
    document.body.appendChild(e);
}

Несмотря на то, что я опубликовал этот ответ на мою проблему, меня интересуют альтернативные подходы к этому :).

...