Blog. Just Blog

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

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


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


Это событие часто используется различными скриптами для модификации страницы сразу после загрузки, например прописываются красивые всплывающие подсказки вместо стандартных атрибутов title, подсвечивается код, выполняется инициализация других скриптов или выполняются другие полезные действия в зависимости от фантазии разработчиков. Проблема в том, что разработчиков с их фантазией много, а событие на странице только одно. И получается ситуация, когда хочется подключить на свою web-страничку несколько скриптов разных производителей, и все они для своей работы хотят монопольно использовать событие onLoad. Конечно, при наличии определенных навыков можно подправить исходный код. Но как быть, если исходный код скриптов недоступен, например файлы расположены на стороннем сервере или упакованы (зашифрованы)? Что делать с упакованными и шифрованными скриптами и их "аффтарами" я расскажу потом, это тема для отдельной статьи, а сейчас будет решаться задача с выполнением нескольких функций по событию onLoad.
Code (JavaScript) : Убрать нумерацию
  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=0; i<onLoadFuncton.length; i++) {
  51.     onLoadFuncton[i];
  52.   }
  53. }
Алгоритм работы: сперва создается массив функций onLoadFuncton, в который будут занесены в порядке очередности все обработчики события onLoad. Добавление нового обработчика выполняется так:
Code (JavaScript) : Убрать нумерацию
  1. safeAddLoadFunction (some_function);
Если функция вызывается с параметрами, то код будет таким:
Code (JavaScript) : Убрать нумерацию
  1. safeAddLoadFunction (some_function('param_1',param_2));
При этом функцией safeAddLoadFunction выполняются следующие действия: проверяется, является ли обработчик функцией и существует ли он вообще, после этого обработчик добавляется в очередь, а на событие onLoad устанавливается наш обработчик safeDoLoadEvents. Пример использования:
Code (JavaScript) : Убрать нумерацию
  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 и в нужной последовательности.

Поделиться ссылкой ВКонтакте
Просмотров: 21164 | Комментариев: 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 символов)*:

*Все поля обязательны для заполнения.
Комментарии, содержащие рекламу, ненормативную лексику, оскорбления и т.п., а также флуд и сообщения не по теме, будут удаляться. Нарушителям может быть заблокирован доступ к сайту.
Это я :-)
Если программист в девять утра уже на работе, значит он там же и ночевал
Главная страница Web-мастеру и не только Образ мышления: Assembler Мои программы Software Темная сторона Силы Обзоры техники А еще я туда ем! Жизнь в оффлайне Всякая всячина
Карта сайта Ссылки Обратная связь Правила сайта Настройки сайта RSS-канал
Ограничение по возрасту 16+ Материалы, опубликованные на этом сайте, не рекомендуются к просмотру лицам в возрасте до 16 лет без присутствия взрослых.
Метки статей
.NET (30), AJAX (5), Assembler (362), COM (41), CSS (42), Exif (15), FASM (8), Firefox (7), HDD (17), Hello Teddy (9), HTML (52), iconBIT (4), JavaScript (73), MySQL (13), Nikon (19), PDF (10), PHP (122), Samsung (6), SEO (12), Sublime Text (9), TintonLife (4), UGREEN (4), Windows 7 (66), аккумуляторы (23), аксессуары (12), анализаторы файлов (8), архиваторы (6), аттракционы (7), безопасность (55), браузеры (16), бытовая техника (19), варенье (19), ВВЦ (9), ВДНХ (14), видео (20), Воробьевы горы (9), вторые блюда (125), выпечка (29), выставки (119), генератор ПСЧ (10), графика (120), десерты (31), Египет (8), заготовки на зиму (47), закуска (22), закуска к пиву (25), зарядные устройства (24), защита (15), зоопарки (10), игры (36), иконки (22), интерфейс (26), исследование защиты (317), каша (4), клавиатура (7), Коломенское (37), консоль (7), концерты (52), Кузьминки (4), куклы (27), ледяные скульптуры (6), мои программы (69), мониторы (6), музеи (78), мультимедиа (77), мясо (62), напитки (14), ноутбуки (8), обфускация (7), окна (69), оформление сайта (50), парки Москвы (7), песчаные скульптуры (13), плееры (10), подводная съемка (4), поздравления (130), полезные функции (42), прохождения (4), процессы (25), птица (21), путешествия (25), распаковка (22), реверсинг (52), рыба (35), салаты (19), сброс триала (4), сеть (36), система (178), Сокольники (8), соусы (14), супы (14), телефоны (10), Тунис (6), умный дом (13), файлы справки (6), фаст-фуд (18), фестиваль цветов (5), флешки (5), фото (23), хеши (16), числа (8), юмор (12), яйца (19), Яндекс (11)
Вам помог этот сайт?
Сказать спасибо! Поблагодарили 35,306 раз
<< 2024 - ОКТЯБРЬ >>
Пн Вт Ср Чт Пт Сб Вс
  1 2 3 4 5 6
7 8 9 10 11 12 13
14 15 16 17 18 19 20
21 22 23 24 25 26 27
28 29 30 31      
Всемирный день почты
День Специальной пожарной охраны МЧС России
День разгрома советскими войсками немецко-фашистских войск в битве за Кавказ
Нашли на сайте орфографическую ошибку? Выделите ее мышкой и нажмите
Ctrl
+
Enter
Буду очень благодарен, если размеcтите мою кнопочку:
Личный блог ManHunter'а
Valid CSS Valid XHTML 1.0 Transitional Valid mobileOK Basic Valid RSS
Яндекс тИЦ: {YANDEX_TIC} Яндекс ИКС: 360
Сейчас я слушаю
---
Имя:

Сообщение:

Осталось символов: 200

   
-
Наверх
Powered by PCL's Speckled Band Engine 0.2 RC3
© ManHunter / PCL, 2008-2024
При использовании материалов ссылка на сайт обязательна
Время генерации: 0.07 сек. / MySQL: 2 (0.0034 сек.) / Память: 4.5 Mb
Наверх