Начнем с документации:
onLoad
Событие onLoad происходит при полной загрузке страницы документа или всех фреймов. Оно считается состоявшимся только после завершения загрузки всей страницы, включая изображения.
Это событие часто используется различными скриптами для модификации страницы сразу после загрузки, например прописываются красивые всплывающие подсказки вместо стандартных атрибутов title, подсвечивается код, выполняется инициализация других скриптов или выполняются другие полезные действия в зависимости от фантазии разработчиков. Проблема в том, что разработчиков с их фантазией много, а событие на странице только одно. И получается ситуация, когда хочется подключить на свою web-страничку несколько скриптов разных производителей, и все они для своей работы хотят монопольно использовать событие onLoad. Конечно, при наличии определенных навыков можно подправить исходный код. Но как быть, если исходный код скриптов недоступен, например файлы расположены на стороннем сервере или упакованы (зашифрованы)? Что делать с упакованными и шифрованными скриптами и их "аффтарами" я расскажу потом, это тема для отдельной статьи, а сейчас будет решаться задача с выполнением нескольких функций по событию onLoad.
//--------------------------------------------------------------
// Multi-onLoadEvents Script
// Copyright (C) ManHunter / PCL
// http://www.manhunter.ru
//--------------------------------------------------------------
// onLoad event list
onLoadFuncton=new Array();
// Add new function to onLoad event
function safeAddLoadFunction(myFunction) {
// Function
if (typeof(myFunction) != 'function') {
return false;
}
if (window.onload) {
if (onLoadFuncton.length) {
// Add new function
onLoadFuncton[onLoadFuncton.length]=new function() {
myFunction();
}
}
else {
// Add first function
oldOnLoadFunction=window.onload;
onLoadFuncton[onLoadFuncton.length]=new function() {
oldOnLoadFunction();
}
// Add new function
onLoadFuncton[onLoadFuncton.length]=new function() {
myFunction();
}
}
}
else {
// Add new function
onLoadFuncton[onLoadFuncton.length]=new function() {
myFunction();
}
}
// Set global onLoad function
window.onload=function() { safeDoLoadEvents(); }
return true;
}
// Execute all onLoad functions
function safeDoLoadEvents() {
for (i=0; i<onLoadFuncton.length; i++) {
onLoadFuncton[i];
}
}
Алгоритм работы: сперва создается массив функций onLoadFuncton, в который будут занесены в порядке очередности все обработчики события onLoad. Добавление нового обработчика выполняется так:
safeAddLoadFunction (some_function);
Если функция вызывается с параметрами, то код будет таким:
safeAddLoadFunction (some_function('param_1',param_2));
При этом функцией safeAddLoadFunction выполняются следующие действия: проверяется, является ли обработчик функцией и существует ли он вообще, после этого обработчик добавляется в очередь, а на событие onLoad устанавливается наш обработчик safeDoLoadEvents. Пример использования:
<html>
<head>
<title>Demo</title>
<!-- Подключаем файл с вышеприведенным скриптом -->
<script src="multi_onload.js" type="text/javascript"></script>
</head>
<!-- Установлен первый обработчик -->
<body onLoad="first_function();">
....
<script type="text/javascript">
<!--
// Наши обработчики onLoad
function first_function() {
document.write('first<br>');
}
function second_function() {
document.write('second<br>');
}
// Пример функции с параметрами
function third_function(id) {
document.write('third - '+id+'<br>');
}
function four_function() {
document.write('four<br>');
}
</script>
<!-- Теперь добавим их все -->
<script type="text/javascript">
<!--
// Не забываем что у нас на странице уже жестко прописан
// первый обработчик first_function. Добавляем к нему наши обработчики
safeAddLoadFunction (second_function);
safeAddLoadFunction (third_function('ok'));
safeAddLoadFunction (four_function);
safeAddLoadFunction (second_function);
</script>
</body>
</html>
После загрузки страницы видим результат:
first
second
third - ok
four
second
Что и требовалось доказать. Все функции отработали по событию onLoad и в нужной последовательности.