Большой архив статей, книг, документации по программированию, вебдизайну, компьютерной графике, сетям, операционным системам и многому другому
 
<Добавить в Избранное>    <Сделать стартовой>    <Реклама на сайте>    <Контакты>
  Главная Документация Программы Обои   Экспорт RSS E-Books
 
Поиск по сайту


 

  Раздел: Компьютерная документация -> Интернет технологии -> JavaScript

 

*.JS, когда грузиться думаешь?

Абстракт. В статье рассматривается проблема очередности загрузки внутренних и внешних JS-скриптов в динамически создаваемых HTML-страницах. Все, о чем идет речь, касается только Internet Explorer v5 и выше (IE4 не пробовал).

Интродюкшн. Как-то однажды делал я такую вот штучку: на открытой в браузере HTML-странице в поле TEXTAREA ввожу команды, нажимаю кнопку - JS-скрипт обрабатывает эти команды, формирует по ним код и создает новое окно, в которое этот код записывает. В новый документ в обязательном порядке записывалась строка, подключающая внешний скрипт - <script src="tools.js"> - для доступа к сервисным функциям.

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

Суть проблемы. Итак, вот что я обнаружил. Пусть имеется код:

<html>
 <head>
  <script id="S1">
   --- script code ---
  </script>
  <script id="S2" src="tools.js"></script>
  <script id="S3">
   --- script code ---
  </script>
 </head>
 <body>
  <script id="S4">
   --- script code ---
  </script>
 </body>
</html>

Если этот HTML-код загружается из файла, то порядок загрузки скриптов естественный: S1 - S2 - S3 - S4. Если же его записать с помощью newWin.document.write в созданное окно newWin, то порядок загрузки скриптов уже другой: S1 - S3 - S4 - S2(!) Т.е. порядок сохранился, если забыть о внешнем скрипте. В данном примере этот скрипт помещен внутрь <head>, но это не существенно, т.к. в <body> ничего не меняется.

Следующий пример призван продемонстрировать описанное изменение порядка загрузки скриптов.
Внешний скрипт example.js:

function demo() {
 alert("example.js:demo() - Я доступна");
}
Тестовая страница:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=windows-1251">
<title>Пример 1.</title>
<script language='JavaScript' src='example.js' charset='windows-1251'></script>
<script language="JavaScript">
 code = "<html>\n\
<head>\n\
<meta http-equiv=\"Content-Type\" content=\"text/html;charset=windows-1251\">\n\
<title>Пример 1. Динамически созданный документ.</title>\n\
<script language='JavaScript' src='example.js' charset='windows-1251'><"+"/script>\n\
<script language='JavaScript'>\n\
 window.onerror = myerror;\n\
 \n\
 function myerror(msg,url,line) {\n\
  alert('Генерится ошибка \\n\"'+msg+'\"\\nв строке '+line+'\\nЛегко убедиться,\\n\
что в этой строке стоит вызов demo()');\n\
  return true;\n\
 }\n\
<"+"/script>\n\
</head>\n\
<body>\n\
<span id=\"ilnb\">Проверяем доступность</span><br>\n\
<script language=\"JavaScript\">\n\
 demo();\n\
<"+"/script>\n\
<script language=\"JavaScript\">\n\
 document.all.ilnb.innerHTML += ' - выполнено';\n\
<"+"/script>\n\
Нажмите кнопку \"Обновить\", и ошибка не появится, т.к. документ уже статичен\n\
</body>\n\
</html>";

 function test() {
  w = window.open();
  w.document.write(code);
 }
</script>
</head>
<body>
<span id="ilnb">Проверяем доступность</span><br>
<script language="JavaScript">
 demo();
 document.all.ilnb.innerHTML += ' - выполнено';
</script>
<a href="#" onclick="test(); return false;">Создать динамический документ</a>
</body>
</html>

Метод устранения. Все делается предельно просто. Пусть нужно подключить файл tools.js. Добавим в его конец инструкцию is_load = 1. В динамически создаваемую страницу выше тега <script src="tools.js"> запишем скрипт, в котором также объявим переменную is_load = 0. Тогда is_load будет равна 0, пока не загрузится tools.js, когда она станет равной 1. Когда загрузка tools.js подтвердится указанным образом, можно будет вызвать код, использующий содержимое этого файла. Этот код указан под собирательным именем tool(). Осталось только отловить момент окончания загрузки. Для этого используем таймер.
Запишем то, что проговорено словами, в виде кода:

<script language='JavaScript'>
 is_load = 0;
 time_ = 100;
 
 function if_load() {
  if ( is_load==0 )
   setTimeout('if_load();',time_);
  else
   tool();
 }
 
 setTimeout('if_load();',time_);
</script>
<script language='JavaScript' src='tool.js'></script>

Обращаю особое внимание на размещение вспомогательного скрипта перед внешним. Порядок следования оказывается существенным, если динамически созданная страница обновляется. Тогда она уже является статической, и скрипты грузятся в порядке появления в коде. Перестановка вспомогательного и внешнего скриптов привела бы к тому, что сначала загрузился бы внешний скрипт - при этом было бы is_load = 1 - после чего загрузилась бы инструкция is_load = 0, что привело бы к непрекращающимся вызовам функции if_load().

Пример реализации.
Внешний скрипт tools.js:

function tool() {
 alert("tools.js:tool() - Я уже загрузилась");
}

is_load = 1;
Тестовая страница:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=windows-1251">
<title>Пример 2.</title>
<script language='JavaScript'>
 is_load = 0;
 time_ = 100;
  
 function if_load() {
  if ( is_load==0 )
   setTimeout('if_load();',time_);
  else {
   tool();
   document.all.ilnb.innerHTML += ' - выполнено';
  }
 }
  
 setTimeout('if_load();',time_);
</script>
<script language='JavaScript' src='tools.js' charset='windows-1251'></script>
<script language="JavaScript">
 code = "<html>\n\
<head>\n\
<meta http-equiv=\"Content-Type\" content=\"text/html;charset=windows-1251\">\n\
<title>Пример 2. Динамически созданный документ</title>\n\
<script language='JavaScript'>\n\
 is_load = 0;\n\
 time_ = 100;\n\
\n\
 function if_load() {\n\
  if ( is_load==0 )\n\
   setTimeout('if_load();',time_);\n\
  else {\n\
   tool();\n\
   document.all.ilnb.innerHTML += ' - выполнено';\n\
  }\n\
 }\n\
\n\
 setTimeout('if_load();',time_);\n\
<"+"/script>\n\
<script language='JavaScript' src='tools.js' charset='windows-1251'><"+"/script>\n\
</head>\n\
<body>\n\
<span id=\"ilnb\">Проверяем доступность</span><br>\n\
Нажмите кнопку \"Обновить\", и загрузка определится правильно, т.к. порядок \n\
следования вспомогательного и внешнего скриптов - правильный\n\
</body>\n\
</html>";

 function test() {
  w = window.open();
  w.document.write(code);
 }
</script>
</head>
<body>
<span id="ilnb">Проверяем доступность</span><br>
<a href="#" onclick="test(); return false;">Создать динамический документ</a>
</body>
</html>

Как видим, все улажено, и в динамически создаваемой странице функция tool() вызывается только тогда, когда она становится доступной.
Благодарю всех за внимание и желаю творческих успехов!

Автор: Александр Рябов
Источник: www.docs.com.ru

Ссылки по теме
Выпадающее меню на CSS и JavaScript
JavaScript и GET-параметры
Создание универсального выпадающего меню
"Живые меню" или "Как сделать красиво с помощью CSS и JavaScript"
Предварительная загрузка рисунков ( preload ) и перекат ( rollover )
JavaScript FAQ

Вся документация JavaScript

 

Компьютерная документация от А до Я - Главная

 

йога для суставов
 
Интересное в сети
 
10 новых программ
CodeLobster PHP Edition 3.7.2
WinToFlash 0.7.0008
Free Video to Flash Converter 4.7.24
Total Commander v7.55
aTunes 2.0.1
Process Explorer v12.04
Backup42 v3.0
Predator 2.0.1
FastStone Image Viewer 4.1
Process Lasso 3.70.4
FastStone Image Viewer 4.0
Xion Audio Player 1.0.125
Notepad GNU v.2.2.8.7.7
K-Lite Codec Pack 5.3.0 Full


Наши сервисы
Рассылка новостей. Подпишитесь на рассылку сейчас и вы всегда будете в курсе последних событий в мире информационных технологий.
Новостные информеры. Поставьте наши информеры к себе и у вас на сайте появится дополнительный постоянно обновляемый раздел.
Добавление статей. Если вы являетесь автором статьи или обзора на тему ИТ присылайте материал нам, мы с удовольствием опубликуем его у себя на сайте.
Реклама на сайте. Размещая рекламу у нас, вы получите новых посетителей, которые могут стать вашими клиентами.
 
Это интересно
 

Copyright © CompDoc.Ru
При цитировании и перепечатке ссылка на www.compdoc.ru обязательна. Карта сайта.
 
Rambler's Top100