Divebi.com

Web Yazılım JS

JavaScript İle Sayfa Offline Olduğunda Kullanıcıyı uyarma

Yayınlanan

İcerisinde

JavaScript İle Sayfa Offline Olduğunda Kullanıcıyı uyarma

Bu yazımda JavaScript Kodu Kullanarak Sayfamızdaki kullanıcının internet bağlantısı gittiği vakit, kullanıcıyı bilgilendirme amaçlı uyarı kutusu gösterdik.

Projemizi geçmeden önce bir HTML sayfası oluşturun veya Divebi Önizle (kod önizleme) web sayfasını kullanabilirsiniz. Aşağıda vermiş olduğum kodları kullanabilirsiniz veya kopyala yapıştır yaparak kodları test edebilirsiniz.

Proje Kodları:
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-width=1.0">
        <title>Mustafa Salman YT</title>
    </head>
    <body>
        <style>
            body {
              display: flex;
              justify-content: center;
              font-family: "Roboto", sans-serif;
              margin: 0;
              padding: 0;
            }
            #internet-offline {
              max-width: 80%;
              width: 450px;
              margin-top: 40px;
              padding: 10px 15px 10px 50px;
              border: 1px solid #414141;
              border-radius: 10px;
              background: url(resim.png) no-repeat 12px 8px #f1f1f1; /* uyarı img url uyarı resminizi veya logo ekleyebilirsiniz */
              background-size: 50px;
              box-shadow: 0 0 4px #838383;
              display: none; /* Sayfa yüklendiğinde uyarı mesajı gözukmemesi için display: none */
            }
            #internet-offline p:nth-child(1) {
              margin: 4px 0;
              font-size: 16px;
            }
            #internet-offline p:nth-child(2) {
              margin: 4px 0;
              font-size: 12px; 
            }
        </style>
        <center>
            <div id="internet-offline">
                <p>
                    <strong>
                        AĞ BAĞLANTI HATASI
                    </strong>
                </p>
                <p>
                    İnternet gitti lütfen bağlantınızı kontrol edin.
                </p>
            </div>
        </center>
        <script>
            const div = document.getElementById("internet-offline")
            // İnternet online olunca internet-offline displlay: none;
            window.addEventListener('online', () => { 
              div.style.display="none" })
            // İnternet offline olunca internet-offline displlay: block;
            window.addEventListener('offline', () => { 
              div.style.display="block"})
        </script>
    </body>
</html>
Yorum yapmak için tıklayın

Cevap bırakın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

Trend Olan Gönderiler