Проблема события Firefox DOMContentLoaded

Question

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

• В теге head, чтобы он загружался до того, как Dom будет готов. Я использовал document.addEventListener("DOMContentLoaded",function(){...},false) для этого, и он хорошо работает
• Динамически загружается, когда Dom уже загружен. В этом случае скрипт не работает, потому что по некоторым причинам, если Dom уже загружен, событие DOMContentLoaded не запускается

Итак, я хочу знать, есть ли способ проверить, загружен ли уже Dom, чтобы скрипт мог выполнить код, не используя событие DOMContentLoaded?

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

Answer 1

Хорошо, это глупо, но оно должно работать: Оберните ваш внешний скрипт в метод init ():

например. (а я тут только догадываюсь)

var myModule = {

    init: function {
        //all the code goes here
        /..
    }
 }

Затем поместите ваш скрипт импорта обратно в тег head и в самом низу вашей разметки DOM добавьте тег script

<script>
    myModule.init();
</script>

Опять же, я бы не рекомендовал это, но если вам нужно избегать проверки события, загруженного DOM, это то, что я бы сделал

Answer 2

Проверьте значение для document.readyState. Если значение 'complete', вы можете выполнить скрипт, если это что-то еще, добавьте слушатель.

Answer 3

Определите свою функцию: function domReadyHandler() { /* ... */ }

Добавьте прослушиватель событий: document.addEventListener('DOMContentLoaded', domReadyHandler, false);

Выполнить обработчик и после динамической загрузки вашего контента: function myXhrCallback() { /* ... */; domReadyHandler(); }

Answer 4

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

window.SCRIPT_IS_DYNAMICALLY_LOADED = true;
< include script>

В сценарии:

if (window.SCRIPT_IS_DYNAMICALLY_LOADED) {
     domContentLoadedListener();
} else {
     document.addEventListener("DOMContentLoaded",domContentLoadedListener, false);
}

Answer 5

Один из самых простых способов сделать это - проверить, можете ли вы получить getElementById для чего-то в конце страницы. Что-то вроде:

if (document.getElementById('footer')) { /* Dom is probably loaded */ }
else { /* Dom is probably NOT loaded */ }

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