Blog. Just Blog

Запуск нескольких функций по событию onLoad

Версия для печати Добавить в Избранное Отправить на E-Mail | Категория: Web-мастеру и не только | Автор: ManHunter
Начнем с документации:


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


Это событие часто используется различными скриптами для модификации страницы сразу после загрузки, например прописываются красивые всплывающие подсказки вместо стандартных атрибутов title, подсвечивается код, выполняется инициализация других скриптов или выполняются другие полезные действия в зависимости от фантазии разработчиков. Проблема в том, что разработчиков с их фантазией много, а событие на странице только одно. И получается ситуация, когда хочется подключить на свою web-страничку несколько скриптов разных производителей, и все они для своей работы хотят монопольно использовать событие onLoad. Конечно, при наличии определенных навыков можно подправить исходный код. Но как быть, если исходный код скриптов недоступен, например файлы расположены на стороннем сервере или упакованы (зашифрованы)? Что делать с упакованными и шифрованными скриптами и их "аффтарами" я расскажу потом, это тема для отдельной статьи, а сейчас будет решаться задача с выполнением нескольких функций по событию onLoad.
  1. //--------------------------------------------------------------
  2. // Multi-onLoadEvents Script
  3. // Copyright (C) ManHunter / PCL
  4. // http://www.manhunter.ru
  5. //--------------------------------------------------------------
  6.  
  7. // onLoad event list
  8. onLoadFuncton=new Array();
  9.  
  10. // Add new function to onLoad event
  11. function safeAddLoadFunction(myFunction) {
  12.   // Function 
  13.   if (typeof(myFunction) != 'function') {
  14.     return false;
  15.   }
  16.   // Is onLoad event already exists?
  17.   if (window.onload) {
  18.     // Is any function in list?
  19.     if (onLoadFuncton.length) {
  20.       // Add new function
  21.       onLoadFuncton[onLoadFuncton.length]=new function() {
  22.         myFunction();
  23.       }
  24.     }
  25.     else {
  26.       // Add first function
  27.       oldOnLoadFunction=window.onload;
  28.       onLoadFuncton[onLoadFuncton.length]=new function() {
  29.         oldOnLoadFunction();
  30.       }
  31.       // Add new function
  32.       onLoadFuncton[onLoadFuncton.length]=new function() {
  33.         myFunction();
  34.       }
  35.     
  36.   }
  37.   else {
  38.     // Add new function
  39.     onLoadFuncton[onLoadFuncton.length]=new function() {
  40.       myFunction();
  41.     }
  42.   }
  43.   // Set global onLoad function
  44.   window.onload=function() { safeDoLoadEvents(); }
  45.   return true;
  46. }
  47.  
  48. // Execute all onLoad functions
  49. function safeDoLoadEvents() {
  50.   for (i=0i<onLoadFuncton.lengthi++) {
  51.     onLoadFuncton[i];
  52.   }
  53. }
Алгоритм работы: сперва создается массив функций onLoadFuncton, в который будут занесены в порядке очередности все обработчики события onLoad. Добавление нового обработчика выполняется так:
  1. safeAddLoadFunction (some_function);
Если функция вызывается с параметрами, то код будет таким:
  1. safeAddLoadFunction (some_function('param_1',param_2));
При этом функцией safeAddLoadFunction выполняются следующие действия: проверяется, является ли обработчик функцией и существует ли он вообще, после этого обработчик добавляется в очередь, а на событие onLoad устанавливается наш обработчик safeDoLoadEvents. Пример использования:
  1. <html>
  2. <head>
  3. <title>Demo</title>
  4. <!-- Подключаем файл с вышеприведенным скриптом -->
  5. <script src="multi_onload.js" type="text/javascript"></script>
  6. </head>
  7. <!-- Установлен первый обработчик -->
  8. <body onLoad="first_function();">
  9.  
  10. ....
  11.  
  12. <script type="text/javascript">
  13. <!--
  14. // Наши обработчики onLoad
  15. function first_function() {
  16.   document.write('first<br>');
  17. }
  18.  
  19. function second_function() {
  20.   document.write('second<br>');
  21. }
  22.  
  23. // Пример функции с параметрами
  24. function third_function(id) {
  25.   document.write('third - '+id+'<br>');
  26. }
  27.  
  28. function four_function() {
  29.   document.write('four<br>');
  30. }
  31. //-->
  32. </script>
  33.  
  34. <!-- Теперь добавим их все -->
  35.  
  36. <script type="text/javascript">
  37. <!--
  38. // Не забываем что у нас на странице уже жестко прописан
  39. // первый обработчик first_function. Добавляем к нему наши обработчики
  40. safeAddLoadFunction (second_function);
  41. safeAddLoadFunction (third_function('ok'));
  42. safeAddLoadFunction (four_function);
  43. safeAddLoadFunction (second_function);
  44. //-->
  45. </script>
  46. </body>
  47. </html>
После загрузки страницы видим результат:

first
second
third - ok
four
second

Что и требовалось доказать. Все функции отработали по событию onLoad и в нужной последовательности.

Поделиться ссылкой ВКонтакте Поделиться ссылкой на Facebook Поделиться ссылкой на LiveJournal Поделиться ссылкой в Мой Круг Добавить в Мой мир Добавить на ЛиРу (Liveinternet) Добавить в закладки Memori Добавить в закладки Google
Просмотров: 17628 | Комментариев: 14

Метки: JavaScript
Внимание! Статья опубликована больше года назад, информация могла устареть!

Комментарии

Отзывы посетителей сайта о статье
Alex (10.01.2013 в 02:45):
Подскажите, будет так любезны. Товарищи :), юзаю glossy.js и resizer.js - оба как вы поняли оспользуют onLoad. Помогите сделать их по очереди...
ecolora (31.01.2012 в 10:30):
А я ещё столкнулся с тем, что просто "пихают" onload в своё расширение, а о других забывают... вот тут постарался изложить свою точку зрения:

http://ecolora.ru/index.php/20...cman-jdmtree
Sad (01.07.2010 в 15:20):
Жалко, у меня не работает, добавляю функции из onload в first и second от 2 разных скриптов и ничего.
Работает только нижний код от Юрия, но и то, срабатывает только function func2() , onload в function func() не хочет(
Алекс (14.05.2010 в 21:54):
Прошу прощения, для ленивых читателей можно разъяснить, где здесь решается проблема нескольких чужих скриптов перезаписывающих window.onload на себя?
Пример приведен, да и код вроде тоже указывает на один такой, а все остальные свои.
Димарик (06.04.2010 в 20:36):
То что надо, спасибо
Алексей (01.02.2010 в 08:32):
То, что надо. Удивительно, что это не предусмотрено изначально, Спасибо.
паккер (01.10.2009 в 22:51):
Спасибо! Отлично :)
Алексей (15.09.2009 в 20:49):
Стуканись в аську [del] или скажи свой номер...
ManHunter (15.09.2009 в 19:26):
Алексей, не совсем понял о чем ты. Я же привел сам скрипт и пример его использования, просто сделай по образу и подобию, и будет счастье :)
Алексей (15.09.2009 в 19:22):
Да я вообще-то Юрию писал... Хм.. А в чем прикол??? Если у меня нигде не прописан window.onload = function{}, то срабатывает только одно событие...
ManHunter (15.09.2009 в 18:43):
Ну и пиши 10 раз "safeAddLoadFunction", проблем-то
Алексей (15.09.2009 в 18:41):
А если у меня их 10???
ManHunter (30.07.2009 в 23:20):
Юрий, комментатор явно ленивый читатель. Если мне доступны скрипты для редактирования, то я и в них самих могу все что надо прописать, без ненужных извратов с "this.onload.prev();", достаточно сделать

window.onload = func2;

function func() {
  ...
}

function func2() {
  ...
  func();
}

И дальше по цепочке сколько мне надо. А давай я заверну пару-тройку скриптов обфускатором и положу себе на сервак. И посмотрим сколько ты в них пропишешь своих "огородов".
Юрий (30.07.2009 в 22:42):
Автор явно не ленивый программист :). Решается эта проблема так:

window.onload = func;
/* Функция тоже объект. Поэтому добавим к объекту func2 свойство prev,
   в котором сохраним ссылку на предыдущий обработчик onload. Эту
   ссылку в теле самой функции (func2) потом вытащим на "свет". :) */
func2.prev = window.onload;
window.onload = func2;

function func() {
    alert('Я пришел первым, а уйду последним');
}

function func2() {
    alert('Я пришел последним, а уйду первым');
    this.onload.prev();
}

и не нужно городить "огород"...

Добавить комментарий

Заполните форму для добавления комментария
Имя*:
Текст комментария (не более 2000 символов)*:

*Все поля обязательны для заполнения.
Комментарии, содержащие рекламу, ненормативную лексику, оскорбления и т.п., а также флуд и сообщения не по теме, будут удаляться. Нарушителям может быть заблокирован доступ к сайту.
Наверх
Powered by PCL's Speckled Band Engine 0.2 RC3
© ManHunter / PCL, 2008-2017
При использовании материалов ссылка на сайт обязательна
Время генерации: 0.09 сек. / MySQL: 2 (0.0038 сек.) / Память: 4.5 Mb
Наверх