Javascript функции Как запустить функцию при загрузке страницы? Вызов функции при загрузке страницы javascript

Если Вы уже более-менее знаете JavaScript , то, наверняка, слышали об обработчике события Load , который называется onload . Данное событие срабатывает непосредственно при загрузке страницы. И очень часто при загрузке страницы должна выполняться какая-то функция. Но что делать, если нужно запустить несколько функций JavaScript ? Собственно, такой вопрос задал один из пользователей на сайте. Поэтому о запуске нескольких функций в onload , я и напишу в этой статье.

Решение действительно тривиальное, достаточно запустить функцию, в которой запускаются все необходимые другие функции:

function a() {
b()
c();
}
function b() {
alert("Функция b() запущена");
}
function c() {
alert("Функция c() запущена");
}

Если открыть данную страницу (здесь нет таких важных вещей, как тега html или, например, заголовка и кодировки страницы, в целях упрощения понимания кода), то увидите, как при загрузке страницы сработают функции b() и c() .

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

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

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

Вот пример:

Документ без названия

К элементу с id #block не будет применяться правило css (background-color:yellow), т.к. строка

$("#block").css("background-color", "yellow");

Будет выполняться раньше, чем загрузиться html-строка:

Как быть, если нам нужно выполнить код или функцию, только после того, как весь документ полностью загрузится?

Я хочу рассказать о трех способах, как это можно сделать.

1 способ. С использованием библиотеки Jquery.

Чаще всего сам им пользуюсь, наиболее простое и удобное решение, но требует подключения библиотеки Jquery.

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

#block {width:100px; height:100px; border:1px solid #ccc;} $(document).ready (function(){ $("#block").css("background-color", "yellow"); }); Документ без названия

2 способ. С помощью элемента body и атрибута onload.

#block {width:100px; height:100px; border:1px solid #ccc;} function funonload() { $("#block").css("background-color", "yellow"); } Документ без названия

3 способ. С помощью объекта window и его свойства onload.

#block {width:100px; height:100px; border:1px solid #ccc;} function funonload() { $("#block").css("background-color", "yellow"); } window.onload = funonload; Документ без названия

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

Я хочу запустить функцию, когда страница загружена, но я не хочу использовать ее в .

У меня есть сценарий, который запускается, если я инициализирую его в , например:

Function codeAddress() { // code }

Но я хочу запустить его без и я пробовал много вещей, например:

Window.onload = codeAddress;

Но это не работает.

Итак, как мне запустить его при загрузке страницы?

window.onload = function() { ... и т. д. не является отличным ответом.

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

Более надежный ответ here:

If(window.attachEvent) { window.attachEvent("onload", yourFunctionName); } else { if(window.onload) { var curronload = window.onload; var newonload = function(evt) { curronload(evt); yourFunctionName(evt); }; window.onload = newonload; } else { window.onload = yourFunctionName; } }

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

Function my_function() { // whatever code I want to run after page load } if (window.attachEvent) {window.attachEvent("onload", my_function);} else if (window.addEventListener) {window.addEventListener("load", my_function, false);} else {document.addEventListener("load", my_function, false);}

Надеюсь это поможет:)

Вместо того, чтобы использовать jQuery или window.onload, родной JavaScript принял некоторые замечательные функции с момента выпуска jQuery. У всех современных браузеров теперь есть собственная функция DOM ready без использования библиотеки jQuery.

Document.addEventListener("DOMContentLoaded", function() { alert("Ready!"); }, false);

window.onload = codeAddress; должен работать - , а полный код:

Test function codeAddress() { alert("ok"); } window.onload = codeAddress;

Test function codeAddress() { alert("ok"); }

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

Пример использования

// add reference to domReady script or place // contents of script before here function codeAddress() { } domReady(codeAddress);