Services
Technology Web App Development Mobile App Development Windows App Development Database Development UI/UX Development Cloud Development SEO Digital Marketing Guest Posting Content Writing Artificial Intelligence Data Science ERP Development CRM Development CMS Development LMS Development Business Listing Blockchain Technology Startup Promotion AI Tools Integration
Products
Data Converter Cleaner TUC - Unit Converter Import Export Survey Manager Tweet Controller
Developer
Article Blog Forum Interview Beginner News Startup Quiz
Users
Career
Apply Job Internship
Pricing
Login Sign Up Get a Quote

forum

home / developersection / forums / detect online and offline through javascript
Ask Question

Detect online and offline through JavaScript

Anonymous User 701 20 Jul 2021

How to detect online and offline of a machine through JavaScript? And display a message at the window?

javascript javascripthtmlcss-css3
Updated 20 Jul 2021
Anonymous User
Anonymous User

Software Developer Trainee

I am a content writter !

Message

1 Answers

Anonymous User
Anonymous User 04 Aug 2021
Report Abuse

The navigator.online property returns a boolean value either true or false, indicating whether the browser is in online mode or offline mode.

Syntax

navigator.onLine

Let's switch to the example for better understanding : 

<!DOCTYPE html>

<html>

<head>

    <meta name='viewport' content='width=device-width, initial-scale=1'>

    <style>

        html{

            scroll-behavior:smooth;

        }

        body {

            margin: 0;

            font-size: 28px;

            font-family: Arial, Helvetica, sans-serif;

        }

    </style>

</head>

<body>

    <div id='online_msg'>

        <div style='position: fixed; bottom: 0; background: #00D100; color: black; width: 100%; text-align: center; z-index: 9999;' id='check_connection'></div>

    </div>

    <script>

        function check_connection() {

            if (navigator.onLine) {

                document.getElementById('check_connection').innerHTML = 'Internet Connected';

                document.getElementById('check_connection').style.backgroundColor = '##00D100';

                document.getElementById('check_connection').style.color = 'black';

            }

            else {

                document.getElementById('check_connection').innerHTML = 'No Internet Connection';

                document.getElementById('check_connection').style.backgroundColor = 'red';

                document.getElementById('check_connection').style.color = 'white';

            }

        }

        setInterval(check_connection, 10);

    </script>

</body>

</html>

Hope this code will be helpful for you.

Happy Coding!

advertising