👀 Live Preview
Current connection state (go offline in DevTools, then back online to test):
Checking connection…
HTML ononline Attribute
Overview
Introduction
The ononline attribute is an inline event handler for the online event on the window. It runs when the browser detects that network connectivity was restored after being offline. Use it to hide offline banners, re-enable sync, retry failed requests, or refresh stale data. Pair it with onoffline when connectivity drops. Check navigator.onLine for the current state. Put ononline on <body> or use window.addEventListener("online", …) in script.
What You’ll Learn
Event handler
Inline JS.
online
Back online.
window / body
Global scope.
navigator.onLine
Current state.
+ onoffline
Full UX pair.
Retry sync
Flush queue.
Fundamentals
Purpose of ononline Attribute
The primary purpose of ononline is to react when the device or browser regains network access — so your app can hide offline messaging, resume background sync, retry API calls that failed while offline, and restore a normal user experience.
The online event fires on the window object. HTML allows window event handlers on <body> for legacy convenience. Like onoffline, this is a browser hint — verify server reachability with a real request when it matters.
Pair with onoffline
Show offline UI in onoffline and tear it down in ononline. Users should always see consistent connection status.
Foundation
📝 Syntax
Set ononline on body or assign window.ononline in JavaScript:
ononline.html
<body onoffline="handleOffline()" ononline="handleOnline()">
…
</body>
<script>
window.ononline = handleOnline;
window.onoffline = handleOffline;
</script>Syntax Rules
- Value is JavaScript executed when the
onlineevent fires on the window. - Valid on
<body>as a window event content attribute. - Also assignable as
window.ononlinein script. - Pair with
onofflineto show offline UI when connectivity drops. - Check
navigator.onLineon page load for initial state. - Modern alternative:
window.addEventListener("online", handler). - Not for input or form elements — this is a browser connectivity event.
Reference
💎 Values
The ononline attribute accepts a string of JavaScript code:
ononline="handleOnline()"— Call a named function.ononline="document.getElementById('banner').hidden = true"— Hide offline banner inline.- JavaScript:
window.ononline = () => { … }— property assignment.
online-handler.html
function handleOnline() {
banner.hidden = true;
status.textContent = "Back online — syncing…";
retryPendingRequests();
}
window.addEventListener("online", handleOnline);
window.addEventListener("offline", handleOffline);Cheat Sheet
⚡ Quick Reference
| Property / event | When it fires | Notes |
|---|---|---|
online | Connectivity restored | ononline |
offline | Connectivity lost | onoffline |
navigator.onLine | Any time (read property) | true / false |
| Event target | window | Global browser event |
| Handler attribute | ononline on body | Window event handler |
Scope
Applicable Elements
| Target | Supported? | Notes |
|---|---|---|
<body> | Yes | Window event on body (HTML) |
window | Yes | Primary target in JavaScript |
<input>, <div> | No | Not an input event — use window |
<frameset> | Yes (legacy) | Rare today |
| Service Worker / PWA | Related | Background sync when online |
Compare
ononline vs onoffline vs navigator.onLine
| API | Type | Typical use |
|---|---|---|
ononline | Event handler | Hide banner, retry sync |
onoffline | Event handler | Show offline banner |
navigator.onLine | Boolean property | Check state on load |
Successful fetch | Network response | Confirm server is reachable |
Hands-On
Examples Gallery
Inline body handler, window.ononline assignment, and reconnect sync with navigator.onLine.
Example — ononline on body
Update status when the browser reconnects:
body-ononline.html
<body onoffline="handleOffline()" ononline="handleOnline()">
<p id="status">Online</p>
</body>
<script>
function handleOnline() {
document.getElementById("status").textContent =
"Back online!";
}
function handleOffline() {
document.getElementById("status").textContent =
"Offline";
}
</script>How It Works
The browser fires online on the window when connectivity is restored. The body attribute runs handleOnline() at that moment.
Dynamic Values with JavaScript
Assign window.ononline (same pattern as the reference tutorial):
window-ononline.html
<script>
function handleOnline() {
document.getElementById("log").textContent =
"Your browser is back online!";
}
window.ononline = handleOnline;
</script>How It Works
window.ononline = handleOnline registers the same handler as an inline ononline attribute on body.
Example — Hide banner and retry sync
When online returns, hide the offline banner and flush a pending queue:
online-sync.html
function handleOnline() {
banner.hidden = true;
status.textContent = "Syncing pending changes…";
flushQueue();
}
function handleOffline() {
banner.hidden = false;
status.textContent = "Offline — changes queued.";
}
window.addEventListener("online", handleOnline);
window.addEventListener("offline", handleOffline);How It Works
ononline is the right moment to retry API calls and background sync that were paused while offline.
A11y
♿ Accessibility
- Announce reconnection — Use
aria-live="polite"on status regions when online returns. - Do not rely on color alone — Include clear text like “Back online”.
- Re-enable controls gracefully — Restore buttons and forms without surprising layout shifts.
- Avoid intrusive popups — Prefer inline status over modal alerts.
- Let users continue working — Sync in the background when possible.
🧠 How ononline Works
1
User was offline
Banner shown.
Offline
2
Network restored
Wi‑Fi / cell on.
Reconnect
3
online fires
ononline runs.
Event
=
Restore UX
Hide banner, sync.
Compatibility
Browser Support
The online event and ononline handler are supported in all modern browsers, including Internet Explorer 9+.
Connectivity Events · Fully supported
Universal ononline support
All major browsers fire online on the window when connectivity returns.
99% Browser support
Google Chrome Fully supported
Full supportMozilla Firefox Fully supported
Full supportApple Safari Fully supported
Full supportMicrosoft Edge Fully supported
Full supportInternet Explorer IE 9+ supported
Full supportOpera Fully supported
Full supportononline attribute 99% supported
Bottom line: Reliable for reconnect UX in all modern browsers.
Pro Tips
💡 Best Practices
✅ Do
- Pair
ononlinewithonoffline - Hide offline UI and retry failed requests on reconnect
- Use
addEventListener("online", …)in production - Verify server reachability with a test fetch when needed
- Test under airplane mode and DevTools offline mode
❌ Don’t
- Use
alert()when the user comes back online - Assume
onlinemeans your API is healthy - Put
ononlineon input elements — use window - Reload the entire page on every reconnect
- Forget to re-enable controls disabled while offline
Wrap Up
Conclusion
The ononline attribute runs JavaScript when the browser regains network connectivity — essential for hiding offline UI, retrying sync, and restoring a smooth user experience.
Pair it with onoffline, check navigator.onLine on load, and prefer addEventListener in production code.
Summary
Key Takeaways
Knowledge Unlocked
Five truths every developer should know about ononline
Bookmark these before building reconnect logic.
5
Core concepts 01
Window event
Global.
Scope 02
+ onoffline
Pair both.
Pattern 03
.onLine
Snapshot.
API 04
Retry sync
Flush queue.
UX 05
Not perfect
Also fetch.
Gotcha❓ Frequently Asked Questions
It runs JavaScript when the
online event fires — when the browser detects that network connectivity was restored.No. It is a window connectivity event, not an input attribute. Use
body or window.addEventListener("online", …).Go offline in DevTools or airplane mode, then reconnect. The
online event fires when connectivity returns.Hide offline banners, re-enable submit buttons, retry failed API calls, and flush queued actions.
window.addEventListener("online", handler) is preferred for production code.Yes in all modern browsers; Internet Explorer 9+.
Handle reconnects gracefully
Practice the ononline attribute with connection status examples in the Try It editor.
About the author
5 people found this page helpful