Атрибут ononline тега <body>

Описание

Атрибут ononline позволяет задать JavaScript-код, который выполняется при восстановлении сетевого соединения. Это событие срабатывает, когда браузер переходит из автономного режима (offline) в онлайн-режим.

Пример использования:
<body ononline="handleOnlineStatus()"> <div id="network-status">Проверка соединения...</div> <script> function handleOnlineStatus() { const statusElement = document.getElementById('network-status'); statusElement.textContent = 'Соединение восстановлено'; statusElement.style.color = 'green'; // Синхронизируем данные с сервером syncPendingData(); // Обновляем контент fetchUpdates(); } // Проверяем статус при загрузке if (navigator.onLine) { handleOnlineStatus(); } </script> </body>

Связанные события и свойства:

Событие/Свойство Описание
onoffline Срабатывает при потере соединения
navigator.onLine Boolean-свойство, указывающее статус соединения
online / offline События, которые можно слушать через addEventListener

Рекомендации по использованию:

  • Используйте для автоматической синхронизации данных после восстановления связи
  • Сочетайте с onoffline для полного контроля сетевого статуса
  • Реализуйте очередь задач для отложенного выполнения
  • Уведомляйте пользователя о восстановлении соединения
  • Проверяйте качество соединения перед тяжелыми операциями

Важные замечания:

  • Событие может срабатывать преждевременно (при слабом соединении)
  • Не все запросы могут быть успешными после восстановления связи
  • На мобильных устройствах возможны частые переключения статуса
  • Для важных операций проверяйте реальную доступность сервера
  • Учитывайте ограничения localStorage (обычно 5MB)

Современные альтернативы:

<script> // 1. Использование Background Sync API if ('serviceWorker' in navigator && 'SyncManager' in window) { navigator.serviceWorker.ready.then(registration => { registration.sync.register('sync-data'); }); } // 2. Использование IndexedDB для хранения данных const dbPromise = indexedDB.open('offlineDB', 1); dbPromise.onupgradeneeded = (event) => { const db = event.target.result; db.createObjectStore('pending', { autoIncrement: true }); }; // 3. Продвинутая проверка соединения async function checkRealConnection() { try { const response = await fetch('https://httpbin.org/get', { method: 'HEAD', cache: 'no-store', timeout: 5000 }); return response.ok; } catch { return false; } } </script>

Оптимизация пользовательского опыта:

  • Показывайте понятные уведомления о статусе соединения
  • Реализуйте прогресс-бар для синхронизации
  • Разрешайте пользователю вручную запускать синхронизацию
  • Храните метку времени последней успешной синхронизации
  • Предусмотрите обработку конфликтов данных

Примечание: Для надежной работы в условиях нестабильного соединения рекомендуется использовать комбинацию ononline/onoffline событий, Service Workers и устойчивых клиентских хранилищ данных.