Navigator, geliştiricilerin uygulamaları için doğru tarayıcıyı seçmelerine yardımcı olan mevcut web tarayıcısı özelliklerini ve özelliklerini almak için çeşitli özellikler sağlayan bir nesnedir. Bu ' Gezgin ' nesnesi, kullanıcının ortamına daha iyi uyacak şekilde kullanıcı arayüzü tasarımı, yazı tipi boyutları veya etkileşimler gibi mevcut web tarayıcısıyla ilgili verileri sağlayan 'userAgentData' adlı bir özellik sunar. Navigatör nesnesi tarafından sağlanan ve makalemizde kısaca tartışılan birçok başka özellik daha vardır. makale1 Ve makale 2 .
Bu blog, JavaScript'teki Navigator nesnesi userAgentData özelliğini açıklayacaktır.
Navigator userAgentData Özelliği Nasıl Kavranır?
' tarafından sağlanan bilgiler userAgentData ” özelliği, geliştiricilerin farklı tarayıcı ortamlarında arama yapmasına ve belirli platformlarda ortaya çıkabilecek sorunları belirlemesine olanak tanır. “ üzerinden erişilebilir. Gezgin ' nesne. Özellikler için değerler “ markalar”, “mobil” ve “platform ”, “ kullanılarak alınabilir userAgentData ” Navigator nesnesinin özelliği.
Sözdizimi
Navigatör “ userAgentData ” özelliği aşağıdaki sözdizimine sahiptir:
gezgin. userAgentData
Yukarıdaki sözdizimi, aşağıdaki gibi özellikleri içeren değerleri döndürür: ' markalar”, “mobil” ve “platform ” web tarayıcısına göre.
Pratik gösterimi görmek için bir programımız olsun:
< vücut >< h1 stil = 'renk: öğrenci mavisi;' > Linux < / h1 >< düğme tıklamada = 'markalar()' > Markaları Al < / düğme >
< düğme tıklamada = 'mobil()' > Mobil Al < / düğme >
< düğme tıklamada = 'platform()' > Markaları Al < / düğme >
< senaryo >
işlev markaları(){
console.log( navigator.userAgentData.brands )
}
işlev mobil(){
console.log('Mobil Cihazda Görüntülüyorsunuz: ' + navigator.userAgentData.mobile)
}
işlev platformu(){
console.log('Kullandığınız Platform veya İşletim Sistemi:\n ' + navigator.userAgentData.platform)
}
< / senaryo >
< / vücut >
Yukarıdaki kod bloğunda görüntülenen kodun açıklaması aşağıdaki gibidir:
- İlk olarak üç “< düğme >” etiketlerini çağıran “etiketler” kullanılır. brands()”, “mobile()” ve “platform()” “onclick” olay dinleyicisini kullanan özel oluşturulmuş işlevler.
- “<”in içinde senaryo >” etiketini tanımlayın, “ markalar “navigator.userAgentData.brands” özelliğini kullanarak web tarayıcısı marka bilgilerini alan ()” işlevi. Ayrıca bu özellik tarafından alınan sonucu konsolda görüntüleyin.
- Aynı şekilde, “ mobil()” ve “platform() ” işlevlerini kullanın ve “ navigator.userAgentData.mobile” ve “navigator.userAgentData.platform” ” özellikleri sırasıyla.
- Bu özellikler ilgili verileri konsol üzerinden döndürür.
Nihai sonuç şöyle görünür:
Çıktı, düğmeye tıklandığında karşılık gelen değerin alındığını ve konsol penceresi üzerinde görüntülendiğini gösterir.
Bonus İpucu: Navigator userAgent Özelliğinin Kullanımı
“ Kullanıcı Aracısı ” özelliği aynı zamanda “ tarafından sağlanmaktadır” gezgin ” nesnesi, kullanıcı tarafından kullanılan mevcut tarayıcının adını, sürümünü ve platformunu döndürür. Bu navigatör özelliğinin pratik gösterimi aşağıda belirtilmiştir:
< vücut >< h1 stil = 'renk: öğrenci mavisi;' > Linuxhint < / h1 >
< düğme tıklamada = 'tarayıcıVerileri()' > Tarayıcıyla İlgili Veri < / düğme >
< P İD = 'hedef' >< / P >< senaryo >
işlev tarayıcıVerileri ( ) { konsol.log ( navigator.userAgent ) }
< / senaryo >
< / vücut >
Yukarıdaki kod şu şekilde açıklanmaktadır:
- İlk olarak “< düğme >” etiketi “ yanında kullanılır tıklamada “browserData()” işlevini çağıran olay dinleyicisi.
- Sonra bu “ tarayıcıVerileri ()” fonksiyonu “<” içerisinde tanımlanmıştır. senaryo >” etiketi. Bu işlev “ navigator.userAgent ” özelliği kullanılır ve sonuç konsolda görüntülenir.
Yukarıdaki kodun tamamlanmasından sonra web sayfasının önizlemesi:
Çıktı, web tarayıcısına ilişkin verilerin alındığını ve konsol penceresi üzerinde görüntülendiğini gösterir.
Gezginin userAgentData özelliğini kavrama prosedürünü öğrendiniz.
Çözüm
“ navigator.userAgentData ” özelliği, geliştiricilerin uygulamayı özellikle tek veya birden fazla web tarayıcısı için oluştururken çok yardımcı olan tarayıcıya özgü değerleri alır. Bu özellik “ için değerleri alabilir. markalar”, “mobil” ve “platform ” dizeleri, döndürülen değerler tarayıcıdan tarayıcıya değişir. Dizenin '' yanına eklenmesi gerekiyor navigator.userAgentData Yalnızca söz konusu dizeye ilişkin değeri döndürmek için ” özelliği. Bu blog, JavaScript'te navigator.userAgentData özelliğini kullanma sürecini başarıyla açıkladı.