Navigator est un objet qui fournit diverses propriétés pour récupérer les fonctionnalités et propriétés actuelles du navigateur Web qui aident les développeurs à choisir le bon navigateur pour leur application. Ce ' Navigateur ' L'objet propose une propriété nommée 'userAgentData' qui fournit des données liées au navigateur Web actuel, telles que la conception de l'interface utilisateur, la taille des polices ou les interactions, pour mieux s'adapter à l'environnement de l'utilisateur. Il existe de nombreuses autres propriétés fournies par l'objet navigateur qui sont brièvement abordées dans notre Article 1 et article2 .
Ce blog expliquera la propriété userAgentData de l'objet Navigator en JavaScript.
Comment saisir la propriété userAgentData du Navigator ?
Les informations fournies par le « userAgentData La propriété 'permet aux développeurs de rechercher différents environnements de navigateur et d'identifier tout problème pouvant survenir sur des plates-formes spécifiques. Il est accessible via le « Navigateur ' objet. Les valeurs des propriétés ' marques », « mobile » et « plateforme ' peut être récupéré en utilisant le ' userAgentData ' Propriété de l'objet Navigator.
Syntaxe
Le navigateur ' userAgentData La propriété ' a la syntaxe suivante :
navigateur. userAgentData
La syntaxe ci-dessus renvoie les valeurs contenant des propriétés telles que « marques », « mobile » et « plateforme » par rapport au navigateur Web.
Ayons un programme pour voir la démonstration pratique :
< corps >< h1 style = 'couleur : bleu cadet ;' > Linux < / h1 >< bouton sur clic = 'marques()' > Récupérer des marques < / bouton >
< bouton sur clic = 'mobile()' > Récupérer le mobile < / bouton >
< bouton sur clic = 'plate-forme()' > Récupérer des marques < / bouton >
< scénario >
marques de fonctions(){
console.log( navigator.userAgentData.brands )
}
fonction mobile(){
console.log('Vous consultez sur mobile : ' + navigator.userAgentData.mobile)
}
plateforme de fonction(){
console.log('La plateforme ou le système d'exploitation que vous utilisez :\n ' + navigator.userAgentData.platform)
}
< / scénario >
< / corps >
La description du code affiché dans le bloc de code ci-dessus est la suivante :
- Tout d’abord, trois « < bouton Les balises > » sont utilisées pour appeler le « marques()', 'mobile()' et 'plateforme() ' Fonctions personnalisées utilisant l'écouteur d'événements ' onclick '.
- À l’intérieur du « < scénario >', définissez la balise ' marques () » qui récupère les informations sur la marque du navigateur Web à l'aide de la propriété « navigator.userAgentData.brands ». Affichez également le résultat récupéré par cette propriété sur la console.
- De la même manière, définissez le « mobile() » et « plateforme() » 'fonctions et utilisez le' navigator.userAgentData.mobile » et « navigator.userAgentData.platform ”propriétés respectivement.
- Ces propriétés renvoient les données correspondantes sur la console.
Le résultat final apparaît comme ceci :
Le résultat montre qu'en cliquant sur le bouton, la valeur correspondante est récupérée et affichée sur la fenêtre de la console.
Astuce bonus : utilisation de la propriété userAgent de Navigator
Le ' agent utilisateur » la propriété est également assurée par le « navigateur ', il renvoie le nom, la version et la plate-forme du navigateur actuel utilisé par l'utilisateur. La démonstration pratique de cette propriété du navigateur est indiquée ci-dessous :
< corps >< h1 style = 'couleur : bleu cadet ;' > Indice Linux < / h1 >
< bouton sur clic = 'données du navigateur()' > Liés au navigateur Données < / bouton >
< p identifiant = 'cible' >< / p >< scénario >
fonction navigateurDonnées ( ) { console.log ( navigateur.userAgent ) }
< / scénario >
< / corps >
Le code ci-dessus est décrit comme :
- Premièrement, le « < bouton >'La balise est utilisée avec le' sur clic ' Écouteur d'événements qui appelle la fonction 'browserData()'.
- Ensuite, ceci ' données du navigateur () » est définie à l’intérieur du « < scénario > »balise. Cette fonction utilise le ' navigateur.userAgent ' et le résultat est affiché sur la console.
Aperçu de la page Web après avoir complété le code ci-dessus :
Le résultat montre que les données liées au navigateur Web ont été récupérées et affichées sur la fenêtre de la console.
Vous avez appris la procédure pour saisir la propriété userAgentData du navigateur.
Conclusion
Le ' navigateur.userAgentData ' La propriété récupère les valeurs spécifiques au navigateur, ce qui est très utile lorsque les développeurs créent l'application spécifiquement pour un ou plusieurs navigateurs Web. Cette propriété peut récupérer les valeurs de « marques », « mobile » et « plateforme ', les valeurs renvoyées varient d'un navigateur à l'autre. La chaîne doit être attachée à côté du « navigateur.userAgentData ' pour renvoyer la valeur uniquement pour cette chaîne. Ce blog a expliqué avec succès le processus d'utilisation de la propriété navigator.userAgentData en JavaScript.