9

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

var element = document.getElementById('element');
element.style.color = 'red';

Как мне запустить данный скрипт, чтобы обращение скрипта к DOM сработало?

2 ответа 2

34

Для тех, кто не знает, почему не работают скрипты с обращением к элементам вида <script>document.getElementById('element').style.color = 'red';</script>:

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

Особенность языка Javascript в том, что его код выполняется последовательно, строка за строкой, как они написаны в исходном коде.

Варианты решения данного вопроса:

  1. Один из простых способов ― перенести <script></script> в body после всех элементов. При таком расположении сначала загрузится DOM, а потом скрипт. Пример:

    <body>
       <div>...</div>
       <script>
          // Ваш скрипт
       </script>
    </body>
    
  2. Самый простой способ, который приходит в голову всем новичкам ― указать функцию в window.onload. Пример:

    window.onload = function() {
       // Ваш скрипт
    };
    

Так же можно добавить через window.addEventListener('load', ...); или window.attachEvent('onload', ...);

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

Ещё одним минусом является то, что нельзя указывать несколько функций таким образом. Т.е. если вы два раза использовали window.onload в коде, то вторая функция сотрёт первую. Но, чтобы это исправить, я сочинил интересный костыль:

    var windowOnloadAdd = function (event) {
       if ( window.onload ){
          window.onload = window.onload + event;
       } else {
          window.onload = event;
       };
    };

    windowOnloadAdd(function() {
       // Ваш скрипт
    });
  1. Интересный вариант ― что-то между первым и вторым пунктом. Создать особую функцию и вызывать её через скрипт в конце body. Пример:

    В JS:

    function onload() {
       // Ваш скрипт
    };
    

    В HTML:

    <body>
       ...
       <script>
          onload();
       </script>
    </body>
    
  2. Тоже из самых популярных приёмов ― установить для body события onload. Пример:

    В JS:

    function myFunc() {
       // Ваш скрипт
    };
    

    В HTML:

    <body onload="myFunc()">...</body>
    
  3. Способ с enStackOveflow ― запуск через функции document.onreadystatechange и document.readyState. Пример:

    document.onreadystatechange = function(){
       if(document.readyState === 'complete'){
          // Ваш скрипт
       }
    }
    
  4. Достаточно новый способ ― запуск через обработчик DOMContentLoaded. Пример:

    document.addEventListener('DOMContentLoaded', function() {
       // Ваш скрипт
    }, false);
    

    Поддержка этого метода начинается с IE9+

  5. Ну и подошли варианты с библиотеками. И первая наша библиотека JQuery ScriptJava. Пример:

    $$r(function() {
       // Ваш скрипт
    });
    

    [ Скачать библиотеку ]

  6. Вариант, который сработает у всех, кто пользуется JQuery ― использовать JQuery :) . Пример:

    Вариант 1:

    $(function() {
       // Ваш скрипт
    });
    

    Вариант 2:

    $(document).ready(function() {
       // Ваш скрипт
    });
    

    [ Ссылка на библиотеку ]

  7. Ещё есть вариант с использованием UI YAHOO. К сожалению, чтобы этот метод сработал, нам нужно подключить аж 2 скрипта: yahoo-min и event-min. Пример:

    YAHOO.util.Event.onDOMReady(function(){
       // Ваш скрипт
    });
    

    [ Скачать "yahoo-min.js" ] | [ Скачать "event-min.js" ]

  8. Самый действенный вариант ― самописная функция со enStackOverflow. Работает в IE8:

    var ready = (function(){

      var readyList,
          DOMContentLoaded,
          class2type = {};
          class2type["[object Boolean]"] = "boolean";
          class2type["[object Number]"] = "number";
          class2type["[object String]"] = "string";
          class2type["[object Function]"] = "function";
          class2type["[object Array]"] = "array";
          class2type["[object Date]"] = "date";
          class2type["[object RegExp]"] = "regexp";
          class2type["[object Object]"] = "object";
    
       var ReadyObj = {
           // Is the DOM ready to be used? Set to true once it occurs.
           isReady: false,
           // A counter to track how many items to wait for before
           // the ready event fires. See #6781
           readyWait: 1,
           // Hold (or release) the ready event
               holdReady: function( hold ) {
               if ( hold ) {
                   ReadyObj.readyWait++;
               } else {
                   ReadyObj.ready( true );
               }
           },
           // Handle when the DOM is ready
           ready: function( wait ) {
               // Either a released hold or an DOMready/load event and not yet ready
               if ( (wait === true && !--ReadyObj.readyWait) || (wait !== true && !ReadyObj.isReady) ) {
                   // Make sure body exists, at least, in case IE gets a little overzealous (ticket #5443).
                   if ( !document.body ) {
                       return setTimeout( ReadyObj.ready, 1 );
                   }
    
                   // Remember that the DOM is ready
                   ReadyObj.isReady = true;
                   // If a normal DOM Ready event fired, decrement, and wait if need be
                   if ( wait !== true && --ReadyObj.readyWait > 0 ) {
                       return;
                   }
                   // If there are functions bound, to execute
                   readyList.resolveWith( document, [ ReadyObj ] );
    
                   // Trigger any bound ready events
                   //if ( ReadyObj.fn.trigger ) {
                   //    ReadyObj( document ).trigger( "ready" ).unbind( "ready" );
                   //}
               }
           },
           bindReady: function() {
               if ( readyList ) {
                   return;
               }
               readyList = ReadyObj._Deferred();
    
               // Catch cases where $(document).ready() is called after the
               // browser event has already occurred.
               if ( document.readyState === "complete" ) {
                   // Handle it asynchronously to allow scripts the opportunity to delay ready
                   return setTimeout( ReadyObj.ready, 1 );
               }
    
               // Mozilla, Opera and webkit nightlies currently support this event
               if ( document.addEventListener ) {
                   // Use the handy event callback
                   document.addEventListener( "DOMContentLoaded", DOMContentLoaded, false );
                   // A fallback to window.onload, that will always work
                   window.addEventListener( "load", ReadyObj.ready, false );
    
               // If IE event model is used
               } else if ( document.attachEvent ) {
                   // ensure firing before onload,
                   // maybe late but safe also for iframes
                   document.attachEvent( "onreadystatechange", DOMContentLoaded );
    
                   // A fallback to window.onload, that will always work
                   window.attachEvent( "onload", ReadyObj.ready );
    
                   // If IE and not a frame
                   // continually check to see if the document is ready
                   var toplevel = false;
    
                   try {
                       toplevel = window.frameElement == null;
                   } catch(e) {}
    
                   if ( document.documentElement.doScroll && toplevel ) {
                       doScrollCheck();
                   }
               }
           },
           _Deferred: function() {
               var // callbacks list
                   callbacks = [],
                   // stored [ context , args ]
                   fired,
                   // to avoid firing when already doing so
                   firing,
                   // flag to know if the deferred has been cancelled
                   cancelled,
                   // the deferred itself
                   deferred  = {
    
                       // done( f1, f2, ...)
                       done: function() {
                           if ( !cancelled ) {
                               var args = arguments,
                                   i,
                                   length,
                                   elem,
                                   type,
                                   _fired;
                               if ( fired ) {
                                   _fired = fired;
                                   fired = 0;
                               }
                               for ( i = 0, length = args.length; i < length; i++ ) {
                                   elem = args[ i ];
                                   type = ReadyObj.type( elem );
                                   if ( type === "array" ) {
                                       deferred.done.apply( deferred, elem );
                                   } else if ( type === "function" ) {
                                       callbacks.push( elem );
                                   }
                               }
                               if ( _fired ) {
                                   deferred.resolveWith( _fired[ 0 ], _fired[ 1 ] );
                               }
                           }
                           return this;
                       },
    
                   // resolve with given context and args
                   resolveWith: function( context, args ) {
                       if ( !cancelled && !fired && !firing ) {
                           // make sure args are available (#8421)
                           args = args || [];
                           firing = 1;
                           try {
                               while( callbacks[ 0 ] ) {
                                   callbacks.shift().apply( context, args );//shifts a callback, and applies it to document
                               }
                           }
                           finally {
                               fired = [ context, args ];
                               firing = 0;
                           }
                       }
                       return this;
                   },
    
                   // resolve with this as context and given arguments
                   resolve: function() {
                       deferred.resolveWith( this, arguments );
                       return this;
                   },
    
                   // Has this deferred been resolved?
                   isResolved: function() {
                       return !!( firing || fired );
                   },
    
                   // Cancel
                   cancel: function() {
                       cancelled = 1;
                       callbacks = [];
                       return this;
                   }
               };
    
           return deferred;
       },
       type: function( obj ) {
           return obj == null ?
               String( obj ) :
               class2type[ Object.prototype.toString.call(obj) ] || "object";
       }
    

    } // The DOM ready check for Internet Explorer function doScrollCheck() { if ( ReadyObj.isReady ) { return; }

       try {
           // If IE is used, use the trick by Diego Perini
           // http://javascript.nwbox.com/IEContentLoaded/
           document.documentElement.doScroll("left");
       } catch(e) {
           setTimeout( doScrollCheck, 1 );
           return;
       }
    
       // and execute any waiting functions
       ReadyObj.ready();
    

    } // Cleanup functions for the document ready method if ( document.addEventListener ) { DOMContentLoaded = function() { document.removeEventListener( "DOMContentLoaded", DOMContentLoaded, false ); ReadyObj.ready(); };

    } else if ( document.attachEvent ) { DOMContentLoaded = function() { // Make sure body exists, at least, in case IE gets a little overzealous (ticket #5443). if ( document.readyState === "complete" ) { document.detachEvent( "onreadystatechange", DOMContentLoaded ); ReadyObj.ready(); } }; } function ready( fn ) { // Attach the listeners ReadyObj.bindReady();

       var type = ReadyObj.type( fn );
    
          // Add the callback
          readyList.done( fn );//readyList is result of _Deferred()
      }
      return ready;
      })();
    
 

    ready(function() {
       // Ваш скрипт
    });
  1. И наконец самый странный и не всегда рабочий вариант ― использовать setTimeout. Пример:

    setTimout(function() { // Ваш скрипт }, 3000);

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

Какой вариант использовать, решать вам :)

2
  • setTimeout не обязан работать - страница может быть всё ещё загружаться в тот момент, когда он сработает.
    – Qwertiy
    7 июл 2017 в 17:41
  • @Qwertiy, добавил это. Ну это я на сайте одном увидел, что некоторые так решать решили :)
    – Yuri
    7 июл 2017 в 17:43
5

Еще забыли про атрибут defer. htmlbook

<script defer>
  // код
</script>
3
  • 1
    лучше написать это в комментарий к ответу
    – Kamushek
    5 сен 2019 в 18:18
  • Пожалуйста, при выборе источника для ссылки, избегайте сайтов напичканых рекламой,
    – 0xdb
    5 сен 2019 в 21:16
  • На момент ответа, таких технологий ещё не было 😃
    – Yuri
    23 дек 2019 в 21:09

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.