Використання JavaScript і onload-події для створення «самостійних» сайтів

Сервер формує сторінку і відправляє її браузеру, коли на сайт прийшов відвідувач. Сукупна логіка всіх сторінок сайту визначає функціональність веб-ресурсу і інтерес до нього відвідувачів. Використання jаvascript і onload-події кардинально змінює функціонування сайту. Якщо на момент закінчення початкової завантаження призначити обробник, то можна визначити, з чого саме, як саме і що слід починати робити.

Головна подія сторінки

Закінчення завантаження сторінки фіксується подією onload, яке призначається тегу body. Настання даної події передує завантаження всіх стильових файлів, скриптів, зображень та інших ресурсів. Дерево елементів сторінки (DOM) побудовано, але може бути не відображено у вікні браузера.


У HTML-синтаксис і на мові jаvascript і body onload - одне ціле. Подія закінчення завантаження виникає, як тільки тіло документа з усіма супутніми файлами (ресурсами) завантажено і готово до використання. У прикладі показано, як підключити обробник події onload на jаvascript. Зліва код HTML-сторінки. Тегу body призначений обробник GoPage(). Праворуч код обробника - звичайна функція мови браузера з «незвичайним» функціоналом.

Простий приклад використання onload

Приклад простий і показовий. Тут немає конкретної логіки, а механізм обробки події onload на jаvascript показаний на затребуваною завдання - орієнтація елементів сторінки у вікні браузера конкретного розміру. Задача проста - сайт потрібно завантажити так, щоб його елементи розташовувалися в правильних позиціях в залежності від розмірів вікна браузера. Відразу після тега body йде опис необхідних змінних, що містять поточні: висоту і ширину вікна, координати шапки, змісту і футера сторінки. Змінні тільки описані, реальні значення вони набувають при обробці події onload в jаvascript функції GoPage().


Сенс прикладу в тому, щоб при завантаженні сторінки отримати потрібні початкові дані і забезпечити виконання функції scfChange(). Ця функція призначається обробником події onresize і запускається кожного разу, коли змінюється розмір вікна браузера. Результат прикладу: подія onload на jаvascript викликає встановлення початкових значень, що забезпечує правильне функціонування scfChange() і запускає звернення до сервера «InitXML( » для прийняття наступних дій.

Проблема логіки використання події onload

Відвідувач приходить на сайт, сторінка завантажується, спрацьовує подія onload, і виконуються всі підготовчі дії. Логіка роботи після відпрацювання onload залежить від логіки сайту і його функціонального призначення. Наприклад, сайт магазина при «прибуття» на нього відвідувача може відновити те місце, в якому цей відвідувач залишив сайт в минулому сеансі. А за «прибуття» нового відвідувача запропонувати йому початкову сторінку з товарами повсякденного або актуального попиту. Сайт пошукової системи може відновити останню вибірку для свого клієнта і запропонувати опис свого функціоналу для нового відвідувача. Немає ніякої гарантії, що завсідник сайту або новий відвідувач не вибере оновлення сторінки. А це теж подія onload, і jаvascript функції доведеться «вміти розрізняти первинну завантаження сторінки від її оновлення. Це не велика проблема в програмуванні, але може становити труднощі для формування правильної логіки роботи сайту в цілому.

Ресурси динамічного сайту

Питання часу (моменту щодо приходу відвідувача) завантаження стилів, малюнків, скриптів - компетенція і професіоналізм розробника. Якщо за логікою області застосування або спектра розв'язуваних завдань потрібно відразу завантажити весь функціонал, ніяких зусиль не потрібно. При відпрацюванні події onload залишиться тільки запустити логіку з будь-якої початкової точки. Деякі ресурси (наприклад, картинки товарів в магазині) відразу не визначено за асортиментом (змістом) і можуть динамічно змінюватися. Прихід відвідувача повинен супроводжуватися відстеженням моменту часу: обробник входу відвідувача jаvascript (onload) і image (load) - процеси, рознесені в часі. Зовсім не обов'язково включати в функціонал обробника входу все, що може стати в нагоді». Зображення (image), звуки (sound) та інші об'ємні ресурси завжди можна завантажити в момент використання або передбачити логіку попередньої підвантаження в ході діалогу з відвідувачем.

Живий і динамічний сайт

Важко уявити створення сучасного динамічного сайту без застосування jаvascript і onload. Function GoPage() - це не просто визначення стану браузера і перерахунок координат елементів сторінки (в прикладі вище). Function GoPage - це виклик сервера «InitXML( » для прийняття важливих рішень і «продовження відносин». Наведений приклад як шаблон рішення щодо створення живого сайту використовувався протягом багатьох років для створення динамічних ресурсів мережі, які ведуть відвідувача від моменту його приходу до завершення сесії. Повернення відвідувача на сайт - це продовження роботи, а не варіант початку нового сеансу. Новий сеанс - це тільки для нового відвідувача. Якщо розглядати onload як прихід відвідувача, то ситуація переходить з події сторінки подія «взаємодії» між відвідувачем сайту (постійним клієнтом), в їх відносини протягом часу.