js запуск функции после загрузки страницы

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 с анонимной функцией, которая при вызове будет запускать желаемую функцию с любыми параметрами, которые вы ей предоставите. И, конечно же, вы можете запустить более одной функции изнутри анонимной функции.

Читайте также:  amd a8 3510mx apu

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.

Читайте также:  cannot find or open the pdb file

Выбирайте тот способ, который более всего подходит к вашей ситуации, и применяйте его на практике.

Есть скрипт, который должен запуститься после загрузки 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+

Читайте также:  http 192 168 1 101 8080

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

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

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

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

И наконец самый дебильный странный и не всегда рабочий вариант ― использовать setTimeout. Пример:

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

Оцените статью
Добавить комментарий

Adblock detector