forum

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

Ask Question

Detect online and offline through JavaScript

Anonymous User 581 20-Jul-2021

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

javascript javascript  html  css-css3 
Updated on 20-Jul-2021
Anonymous User

Software Developer Trainee

I am a content writter !

Follow
Can you answer this question?
Answer

1 Answers

Anonymous User

Anonymous User

04-Aug-2021

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!

MindStick Training
MindStick Training

Liked By

We use cookies to ensure you have the best browsing experience on our website. By using our site, you acknowledge that you have read and understood our Cookie Policy & Privacy Policy