HTML ononline Event Attribute

Description

The HTML ononline event attribute is a global event attribute that triggers a JavaScript function when the browser starts to work online. This can be useful for notifying the user that their internet connection has been restored, or for automatically reloading a page or performing other actions when the user goes back online.

The ononline attribute can be used on any HTML element, but it is most commonly used on the <body> tag. For example, the following code would display an alert message when the browser goes online:

<body ononline="alert('You are now online!')">
</body>

The ononline event attribute is the opposite of the onoffline event attribute, which triggers a function when the browser goes offline.

Here is an example of a more complex use case for the ononline event attribute:

<body ononline>
  <script>
    // Check if the user is logged in.
    if (localStorage.getItem('isLoggedIn')) {
      // Reload the page to get the latest data from the server.
      location.reload();
    } else {
      // Display a login form.
      document.getElementById('loginForm').style.display = 'block';
    }
  </script>
</body>

In this example, the ononline event attribute is used to check if the user is logged in and reload the page if they are. If the user is not logged in, a login form is displayed. This ensures that the user is always logged in when they have an internet connection and they are always able to see the latest data from the server.

The ononline event attribute is a useful tool for creating web applications that are responsive to the user's internet connection status.

Syntax

<element ononline="script">

Values

  • scriptThe name of the script to use when the event has been triggered.

Example

<!DOCTYPE HTML>
<html>
<html>
<body ononline="onFunction()" onoffline="offFunction()">

<p>Open the File menu and click on the “Work offline” button to switch between working on onlie and offline.</p>

<p><strong>Note:</strong>Ononline and onoffline events are supported only in Firefox and Internet Explorer from versions 8 to 10.</p>

<script>
function onFunction() {
alert ("EXAMPLE: Your browser is online.");
}

function offFunction() {
alert ("EXAMPLE: Your browser is offline.");
}
</script>

</body>
</html>

Browser Support

The following table will show you the current browser support for the HTML ononline Event Attribute.

Desktop
Edge Chrome Firefox Opera Safari
YesYesYesYesYes
Tablets / Mobile
Chrome Firefox Opera Safari Samsung Webview
YesYesYesYesYesYes

Last updated by CSSPortal on: 14th October 2023