Рано или поздно при написании JavaScript’а возникает необходимость в том, чтобы он был автоматически запущен при загрузке страницы. Нужно это, как правило, для следующих действий: инициализация интерфейса (UI) и отложенная загрузка данных (lazy load).
Как часто бывает, для такой простой на первый взгляд задачи, есть несколько способов решения.

Задача. После загрузки страницы, нам нужно каким-то образом проинициализировать меню функцией initiPageMenu(), которыя находится в файле menu.js.

Способы решения:

1. Самый простой способ: в конце js-файла делаем вызов нужной функции.

menu.js:
// some javascript code
initiPageMenu();
// end of file

Самый простой способ имеет множество недостатков:

  • если скрипт подключается в теге <head>, у него нет доступа к DOM-модели;
  • вызов необходимой функции блокирует загрузку других скриптов;
  • необходимо учитывать, что к моменту загрузки скрипта, DOM-модель существует и все необходимые зависимости учтены (например, загружен другой скриат).
  • при просмотре файла menu.js не всегда очевидно, что будет выполнена функция initiPageMenu();
  • данный способ ничего не знает о UpdatePanel.

2. На серверной стороне в событии OnLoad или OnPreInit добавить следующий код:

ScriptManager.RegisterStartupScript(this,  this.GetType(), "initiPageMenu", “initiPageMenu();”, true);

Этот способ значительно лучше. Вызов функции initiPageMenu() будет помещен в конец тега <body>. Из недостатков отмечу следующее:

  • при изменении имени функции необходимо перекомпилировать серверный код со всеми вытекающими отсюда последствиями;
  • вызов клиентской (javascript) функции находится в серверном коде - ничего плохого в этом нет, но, imho, теряется красота кода на стороне сервере; хочу отметить, что во многих случаях этот вариант остаются единственным возможным (когда необходимо передать в клиентский код значение серверной переменной).

3. В файле menu.js добавить функцию page_load():

function page_load() {
    initiPageMenu();
}

После загрузки страницы, ScriptManager ищет все обработчики page_load() и выполняет их в порядке загрузки. К моменту начала выполнения этой функции страница уже полностью загруженна браузером и есть доступ к DOM-модели.

Недостатки:

  • неширокая распространённость данного подхода (а недостаток ли это?);
  • не работает без использования на странице ScriptManager (а такие страницы ещё остались!).

4. Последний способ, о котором я хочу рассказать - событие document.ready() при использовании jQuery:

$(document).ready(initiPageMenu());

Недостаки тут тоже есть (куда же без них?)

  • необходимо использовать библиотеку jQuery;
  • как и первый, данный способ также ничего не знает о UpdatePanel.


Какой способ использовать - каждый должен выбрать сам. Единственное, на что необходимо обратить внимание - использование нескольких способов одновременно сильно усложняет понимание и сопровождение кода. Исключением из этого правила является пункт 2, но и его можно обойти при использовании IScriptControl и клиентских событий AjaxScriptManager.


Comments

Ivan Kolodyazhny

Monday, November 22, 2010 3:53 PM

trackback

4 способа запустить JavaScript при загрузки страницы

Рано или поздно при написании JavaScript’а возникает необходимость в том, чтобы он был автоматически

Comments are closed