Кажется, что window.onload срабатывает до загрузки DOM (JavaScript) - PullRequest
Новая
       32

Кажется, что window.onload срабатывает до загрузки DOM (JavaScript)

8 голосов
/ 21 марта 2010

У меня проблемы с событиями window.onload и document.onload. Все, что я прочитал, говорит мне, что они не сработают, пока DOM не будет полностью загружен всеми своими ресурсами, кажется, что это не происходит для меня:

Я попробовал следующую простую страницу в Chrome 4.1.249.1036 (41514) и IE 8.0.7600.16385 с одинаковым результатом: оба отобразили сообщение «Не удалось!», Указывая, что myParagraph не загружен (и поэтому DOM кажется неполным ). 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
    <head>
        <script type="text/javascript">
            window.onload = doThis();
            // document.onload gives the same result

            function doThis() {
                if (document.getElementById("myParagraph")) {
                    alert("It worked!");
                } else {
                    alert("It failed!");
                }
            }
        </script>
    </head>

    <body>
        <p id="myParagraph">Nothing is here.</p>
    </body>
</html>

Я использую более сложные сценарии, чем этот, во внешнем файле .js, но это иллюстрирует проблему. Я могу заставить его работать, установив в window.onload таймер на полсекунды для запуска doThis (), но это кажется неэффективным решением и не дает ответа на вопрос, почему window.onload, похоже, не выполняет то, что все говорят, что это так. Другое решение состоит в том, чтобы установить таймер, который будет проверять, загружен ли DOM, и если нет, он будет вызывать себя через полсекунды (так что он будет продолжать проверять, пока не будет загружен DOM), но это кажется мне слишком сложным. Есть ли более подходящее событие для использования?

Ответы [ 5 ]

10 голосов
/ 21 марта 2010

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

<script type="text/javascript">
    window.onload = function(){
        window.document.body.onload = doThis; // note removed parentheses
    };

    function doThis() {
        if (document.getElementById("myParagraph")) {
            alert("It worked!");
        } else {
            alert("It failed!");
        }
    }
</script>

Протестировано для работы в FF / IE / Chrome, хотя думаю об обработке document.onload тоже.

Как уже упоминалось, гораздо лучше будет использовать js-frameworks.

9 голосов
/ 04 июня 2010

Просто используйте window.onload = doThis; вместо window.onload = doThis();

7 голосов
/ 04 июля 2016

Важно понимать, что () - это оператор , такой же, как + или &&.() Берет функцию и вызывает ее.

Таким образом, в этом случае doThis является объектом функции, а () является оператором, который вызывает функцию.doThis() объединяет вместе вызовы doThis, выполняет его и возвращает значение, равное doThis

Так что window.onload = doThis() в основном присваивает возвращаемое значение doThis window.onload

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

Do window.onload = doThis

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

Это зависит от того, где вы поместили функцию onload (тег head или body или далее вниз), причем внутренняя привязка событий, по-видимому, немного отличается в разных браузерах.

Смотрите также window.onload против document.onload

1 голос
/ 21 марта 2010

Вы пытались использовать вместо этого библиотеку javascript, например, jQuery и функция $(document).ready(): 

  $(document).ready(function() {
      // put all your jQuery goodness in here.
  });
...