👀 Live Preview
Current connection state (toggle airplane mode or disable network to test offline):
Checking connection…
HTML onoffline Attribute
Overview
Introduction
The onoffline attribute is an inline event handler for the offline event on the window. It runs when the browser detects that network connectivity was lost. Use it to show an offline banner, pause sync, or queue actions until the user is back online. Pair it with ononline when connectivity returns. Check navigator.onLine for the current state. Put onoffline on <body> (HTML maps body window-event attributes to the window) or use window.addEventListener("offline", …) in script.
What You’ll Learn
Event handler
Inline JS.
offline
No network.
window / body
Global scope.
navigator.onLine
Current state.
+ ononline
Restore UX.
addEventListener
Preferred way.
Fundamentals
Purpose of onoffline Attribute
The primary purpose of onoffline is to react when the device or browser loses network access — so your app can warn the user, disable submit buttons, switch to cached data, or show a “You are offline” message instead of failing silently.
The offline event fires on the window object. HTML allows window event handlers on <body> for legacy convenience. The event is a hint — always combine with navigator.onLine and robust fetch error handling for production apps.
Not a perfect network test
navigator.onLine can be true while the server is unreachable. Use failed fetch requests as a second signal in real apps.
Foundation
📝 Syntax
Set onoffline on body or assign window.onoffline in JavaScript:
onoffline.html
<body onoffline="handleOffline()" ononline="handleOnline()">
…
</body>
<script>
window.onoffline = handleOffline;
window.ononline = handleOnline;
</script>Syntax Rules
- Value is JavaScript executed when the
offlineevent fires on the window. - Valid on
<body>as a window event content attribute. - Also assignable as
window.onofflinein script. - Pair with
ononlineto hide offline UI when back online. - Check
navigator.onLineon page load for initial state. - Modern alternative:
window.addEventListener("offline", handler). - Not for individual elements — this is a browser connectivity event.
Reference
💎 Values
The onoffline attribute accepts a string of JavaScript code:
onoffline="showOfflineBanner()"— Call a named function.onoffline="document.getElementById('banner').hidden = false"— Inline statement.- JavaScript:
window.onoffline = () => { … }— property assignment.
offline-handler.html
function updateConnectionStatus() {
const online = navigator.onLine;
banner.hidden = online;
status.textContent = online ? "Online" : "Offline";
}
window.addEventListener("offline", updateConnectionStatus);
window.addEventListener("online", updateConnectionStatus);
updateConnectionStatus();Cheat Sheet
⚡ Quick Reference
| Property / event | When it fires | Notes |
|---|---|---|
offline | Connectivity lost | onoffline |
online | Connectivity restored | ononline |
navigator.onLine | Any time (read property) | true / false |
| Event target | window | Global browser event |
| Handler attribute | onoffline on body | Window event handler |
Scope
Applicable Elements
| Target | Supported? | Notes |
|---|---|---|
<body> | Yes | Window event on body (HTML) |
window | Yes | Primary target in JavaScript |
<div>, <button> | No | Use window listeners |
<frameset> | Yes (legacy) | Rare today |
| Service Worker / PWA | Related | Cache + offline pages |
Compare
onoffline vs ononline vs navigator.onLine
| API | Type | Typical use |
|---|---|---|
onoffline | Event handler | Show offline banner |
ononline | Event handler | Hide banner, retry sync |
navigator.onLine | Boolean property | Check state on load |
Failed fetch | Network error | Real server reachability |
Hands-On
Examples Gallery
Inline body handler, addEventListener on window, and offline banner with navigator.onLine.
Example — onoffline on body
Show feedback when the browser goes offline:
body-onoffline.html
<body onoffline="handleOffline()" ononline="handleOnline()">
<p id="status">Online</p>
</body>
<script>
function handleOffline() {
document.getElementById("status").textContent = "Offline";
}
function handleOnline() {
document.getElementById("status").textContent = "Online";
}
</script>How It Works
The browser fires offline on the window. The body attribute runs your handler when that happens.
Dynamic Values with JavaScript
Assign window.onoffline or use addEventListener:
window-onoffline.html
<script>
window.onoffline = function () {
document.getElementById("log").textContent =
"Your browser is now offline.";
};
window.ononline = function () {
document.getElementById("log").textContent =
"Back online.";
};
</script>How It Works
Property assignment on window is equivalent to the inline body handler for the offline event.
Example — Offline banner + navigator.onLine
Show a banner when offline and hide it when online:
offline-banner.html
function syncBanner() {
banner.hidden = navigator.onLine;
banner.textContent = navigator.onLine
? "" : "You are offline — changes will sync later.";
}
window.addEventListener("offline", syncBanner);
window.addEventListener("online", syncBanner);
syncBanner();How It Works
Call syncBanner() on load and on both offline and online events so the UI always matches navigator.onLine.
A11y
♿ Accessibility
- Use visible offline messages — Do not rely on color alone; include clear text.
- Consider
aria-live="polite"on status regions when connectivity changes. - Keep content readable offline — Cache critical UI with service workers when possible.
- Do not block the whole page — Let users read cached content while offline.
- Explain how to reconnect — Short, helpful copy beats technical jargon.
🧠 How onoffline Works
1
User was online
App works normally.
Online
2
Network lost
Wi‑Fi / cell off.
Disconnect
3
offline fires
onoffline runs.
Event
=
Offline UX
Banner, queue.
Compatibility
Browser Support
The offline event and onoffline handler are supported in all modern browsers, including Internet Explorer 9+.
Connectivity Events · Fully supported
Universal onoffline support
All major browsers fire offline on the window when connectivity changes.
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 supportonoffline attribute 99% supported
Bottom line: Reliable for offline detection UX in all modern browsers.
Pro Tips
💡 Best Practices
✅ Do
- Pair
onofflinewithononline - Read
navigator.onLineon page load - Use
addEventListener("offline", …)in production - Show clear, friendly offline messaging
- Handle failed fetches as a backup signal
❌ Don’t
- Use
alert()when the user goes offline - Trust
navigator.onLinealone for server health - Put
onofflineon random divs — use window - Block all interaction when offline without reason
- Forget to remove offline UI when
onlinefires
Wrap Up
Conclusion
The onoffline attribute runs JavaScript when the browser loses network connectivity — essential for offline banners, queued actions, and resilient web apps.
Pair it with ononline, check navigator.onLine on load, and prefer addEventListener in production code.
Summary
Key Takeaways
Knowledge Unlocked
Five truths every developer should know about onoffline
Bookmark these before building offline-aware apps.
5
Core concepts 01
Window event
Global.
Scope 02
+ ononline
Pair both.
Pattern 03
.onLine
Snapshot.
API 04
Banner UX
Inform user.
UX 05
Not perfect
Also fetch.
Gotcha❓ Frequently Asked Questions
It runs JavaScript when the
offline event fires — when the browser detects that network connectivity was lost.No. Use
body (window event attribute) or window.addEventListener("offline", …) in JavaScript.Disable network in DevTools (Network tab → Offline), turn on airplane mode, or unplug Ethernet. Then reload and toggle connectivity.
A boolean property —
true if the browser thinks it is online, false if offline. Read it anytime; events tell you when it changes.window.addEventListener("offline", handler) is preferred for production code.Yes in all modern browsers; Internet Explorer 9+.
Build offline-aware web apps
Practice the onoffline attribute with connection status examples in the Try It editor.
About the author
5 people found this page helpful