Как узнать, когда доступен элемент «тело» DOM? - PullRequest
Новая
       31

Как узнать, когда доступен элемент «тело» DOM?

2 голосов
/ 28 февраля 2012

Как только body узел DOM станет доступен, я бы хотел добавить к нему класс с помощью JavaScript.
Я хочу, чтобы это произошло как можно скорее , перед любым из *Загружены дочерние элементы 1005 *.

Сейчас я использую встроенный скрипт сразу после открытия тега body.Есть ли менее навязчивый способ?

Ответы [ 2 ]

2 голосов
/ 20 ноября 2016

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

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

  var script = document.createElement('script');
  script.src = '//localhost:4000/app.js';
  (function appendScript() {
    if (document.body) return document.body.appendChild(script);
    window.requestAnimationFrame(appendScript);
  })();
2 голосов
/ 28 февраля 2012

Я бы предположил, что это будет отличаться в разных браузерах.

Одним из решений может быть его проверка, поместив скрипт непосредственно внутри открывающего тега <body>, а затем запустив код с интервалом для добавления класса.. 

<body>
    <script>
    function add_class() { 
        if(document.body)
             document.body.className = 'some_class';
        else 
            setTimeout(add_class, 10);  // keep trying until body is available
    }
    add_class();
    </script>

    <!-- rest of your elements-->
</body>

jQuery внутренне делает нечто подобное , чтобы справиться с конкретной ошибкой IE .

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

Вот источник , где jQuery использует аналогичный подход, проверяя наличие body в его основном обработчике jQuery.ready и многократно вызывая jQuery.ready через setTimeout, если body недоступен.

И вот пример , чтобы увидеть, может ли ваш браузер видеть элемент <body> в скрипте вверху элемента, перед другими элементами. (откройте консоль)

Вот тот же пример без использования консоли.

...