837356 просмотра
8 ответа
3720 Репутация автора
Традиционно, чтобы вызвать функцию JavaScript после загрузки страницы, вы должны добавить onload атрибут к телу, содержащий немного JavaScript (обычно только вызов функции)
Когда страница загрузится, я хочу запустить некоторый код JavaScript для динамического заполнения частей страницы данными с сервера. Я не могу использовать onload атрибут, так как я использую фрагменты JSP, у которых нет body элемента , к которому я могу добавить атрибут.
Есть ли другой способ вызвать функцию JavaScript при загрузке? Я бы предпочел не использовать jQuery, так как я не очень знаком с ним.
Ответы (8)
33 плюса
304060 Репутация автора
Или с помощью jQuery, если вы хотите:
Если вы хотите вызвать более одной функции при загрузке страницы, посмотрите эту статью для получения дополнительной информации:
28 плюса
31977 Репутация автора
Ваш первоначальный вопрос был неясен, при условии, что редактирование / интерпретация Кевина верны, тогда этот первый вариант не применим
Типичные варианты использования onload события:
Вы также можете разместить свой javascript в самом конце тела; он не начнет выполняться, пока документ не будет готов.
И еще один вариант — рассмотреть возможность использования инфраструктуры JS, которая по сути делает это:
Автор: STW Размещён: 01.10.2010 07:59
307 плюса
6340 Репутация автора
Если вы хотите, чтобы метод onload принимал параметры, вы можете сделать что-то похожее на это:
Это связывает onload с анонимной функцией, которая при вызове будет запускать желаемую функцию с любыми параметрами, которые вы ей предоставите. И, конечно же, вы можете запустить более одной функции изнутри анонимной функции.
50 плюса
1662 Репутация автора
Другой способ сделать это — использовать прослушиватели событий, вот как вы их используете:
DOMContentLoaded Это означает, что когда объекты DOM документа полностью загружены и видны в JavaScript, это также может быть «щелчок», «фокус» .
function () Анонимная функция, будет вызываться при возникновении события.
6 плюса
1103 Репутация автора
Вы должны вызвать функцию, которую вы хотите вызвать при загрузке (т. Е. Загрузку документа / страницы). Например, функция, которую вы хотите загрузить, когда загрузка документа или страницы называется «yourFunction». Это можно сделать, вызвав функцию загрузки события документа. Пожалуйста, смотрите код ниже для более подробной информации.
Сегодня хочу рассказать об одной проблеме, которая часто возникает у людей, которые начинают изучать Javascript.
Они пытаются взаимодействовать с HTML-элементами на странице, которые находятся ниже по коду, чем сам скрипт. Соответственно, скрипт уже подгрузился, а элемент, с которым нужно будет взаимодействовать, еще нет. По этой причине ничего работать не будет.
Особенность языка Javascript в том, что его код выполняется последовательно, строка за строкой, как они написаны в исходном коде.
К элементу с id #block не будет применяться правило css (background-color:yellow), т.к. строка
Будет выполняться раньше, чем загрузиться html-строка:
Как быть, если нам нужно выполнить код или функцию, только после того, как весь документ полностью загрузится?
Я хочу рассказать о трех способах, как это можно сделать.
1 способ. С использованием библиотеки Jquery.
Чаще всего сам им пользуюсь, наиболее простое и удобное решение, но требует подключения библиотеки Jquery.
Вот как преобразиться предыдущий, код, если мы воспользуемся следующим методом.
2 способ. С помощью элемента body и атрибута onload.
3 способ. С помощью объекта window и его свойства onload.
Выбирайте тот способ, который более всего подходит к вашей ситуации, и применяйте его на практике.
Есть скрипт, который должен запуститься после загрузки DOM, так как в нём есть обращение к DOM:
Как мне запустить данный скрипт, чтобы обращение скрипта к DOM сработало?
2 ответа 2
Для тех, кто не знает, почему не работают скрипты с обращением к элементам вида :
Скрипт пытается взаимодействовать с HTML-элементами на странице, которые находятся ниже по коду, чем сам скрипт. Соответственно, скрипт уже подгрузился, а элемент, с которым нужно будет взаимодействовать, еще нет. По этой причине ничего работать не будет.
Особенность языка Javascript в том, что его код выполняется последовательно, строка за строкой, как они написаны в исходном коде.
Варианты решения данного вопроса:
Один из простых способов ― перенести в body после всех элементов. При таком расположении сначала загрузится DOM, а потом скрипт. Пример:
Самый простой способ, который приходит в голову всем новичкам ― указать функцию в window.onload . Пример:
Так же можно добавить через window.addEventListener(‘load’, . ); или window.attachEvent(‘onload’, . );
Но у этого метода есть недостаток: если на странице сайта куча картинок, которые грузятся пол часа, то скрипт выполнится только после того, как загрузятся все картинки и это может занят много времени.
Ещё одним минусом является то, что нельзя указывать несколько функций таким образом. Т.е. если вы два раза использовали window.onload в коде, то вторая функция сотрёт первую. Но, чтобы это исправить, я сочинил интересный костыль:
Интересный вариант ― что-то между первым и вторым пунктом. Создать особую функцию и вызывать её через скрипт в конце body. Пример:
Тоже из самых популярных приёмов ― установить для body события onload . Пример:
Способ с enStackOveflow ― запуск через функции document.onreadystatechange и document.readyState . Пример:
Достаточно новый способ ― запуск через обработчик DOMContentLoaded . Пример:
Поддержка этого метода начинается с IE9+
Ну и подошли варианты с библиотеками. И первая наша библиотека JQuery ScriptJava. Пример:
Вариант, который сработает у всех, кто пользуется JQuery ― использовать JQuery 🙂 . Пример:
Ещё есть вариант с использованием UI YAHOO. К сожалению, чтобы этот метод сработал, нам нужно подключить аж 2 скрипта: yahoo-min и event-min . Пример:
Самый действенный вариант ― самописная функция со enStackOverflow. Работает в IE8:
И наконец самый дебильный странный и не всегда рабочий вариант ― использовать setTimeout. Пример:
Это все варианты, которые я встречал, но возможно не единственный, так как другие гавнокодеры веб-программисты могли придумать свои костыли функции для решения данной задачи.
