Script : Information sur le navigateur

Ce script donne toutes les informations sur le navigateur du visiteur (nom, version, système d'exploitation et langue)

<html><head>
<title>Tout JavaScript.com - Informations sur le navigateur (OS, nom et version)</title>
<style type="text/css">
	table.tableau {
		border-collapse:collapse;
		border:1px solid #999;
		
	}
	table.tableau td {
				border-collapse:collapse;
		border:1px solid #999;

}
	td.property {
		padding:3px;
	}
	td.value {
		padding:3px;		
	}
	td.number {
		color: #00E;
	}
	td.string {
		color:#d442f4
	}
	td.boolean {
		color:#0E0;
	}
	td.array {
		color:#666;		
	}
	td.undefined {
		color:#ccc;
		font-style: italic;
	}
	
</style>
<script type="text/javascript">
function getNavigator() { 
	var properties=["product", "vendor", "appCodeName", "appName", "appVersion", "userAgent", "platform", "language", "languages", "onLine", "cookieEnabled", "hardwareConcurrency"];

var table="<table class=\"tableau\">";
	for (var i=0; i<properties.length; i++) {
		table+="<tr><td class='property'><code>"+properties[i]+"</code></td>";
		var val=navigator[properties[i]];
		switch(typeof val) {
			case "string":
			  table+="<td class='value string'>"+val+"</td></tr>";			
			  break;
			case "boolean":
			  table+="<td class='value boolean'>"+val+"</td></tr>";			
			  break;
			case "number":
			  table+="<td class='value number'>"+val+"</td></tr>";			
			  break;
			case "object":
			  table+="<td class='value array'>["+val.toString()+"]</td></tr>";			
			  break;
			case "undefined":
			  table+="<td class='value undefined'>non défini pour ce navigateur</td></tr>";			
			  break;
		} 
	}
	table+="</table>";
	document.getElementById("tableau").innerHTML=table;
	console.log(navigator);
}

</script>
</head>

<body >

<h1>Récupère toutes les infos sur l'objet navigator</h1>
<p>Ce script extrait les infos disponibles communes à tous les browsers à partir des propriétés de <code>navigator</code>.</p>
<div id="tableau"></div>

<p>La détection du navigateur et de sa version nécessite des manipulations de chaînes de caractères assez fastidieuses et de nombreux tests pour valider la fiabilité des traitements.
<p>Le principe est d'abord de détecter la <code>plateform</code> et le <code>vendor</code>.
<p>Ensuite, l'analyse de <code>appVersion</code> permet d'affiner en cherchant dans la chaîne les structures du type :
	<ul>
		<li>Chrome/VV.xxx</li>
		<li>Opera/VV.xxx</li>
		<li>Edge/VV.xxx</li>
		<li>Safari/VV.xx</li>
	</ul>
	Avec VV, le numéro de version.
</body>
</html>

Exécution du script

Code source

<html><head><title>Tout JavaScript.com - Informations sur le navigateur (OS, nom et version)</title><style type="text/css">    table.tableau {        border-collapse:collapse;        border:1px solid #999;            }    table.tableau td {                border-collapse:collapse;        border:1px solid #999;    }    td.property {        padding:3px;    }    td.value {        padding:3px;            }    td.number {        color: #00E;    }    td.string {        color:#d442f4    }    td.boolean {        color:#0E0;    }    td.array {        color:#666;            }    td.undefined {        color:#ccc;        font-style: italic;    }    </style><script type="text/javascript">function getNavigator() {     var properties=["product", "vendor", "appCodeName", "appName", "appVersion", "userAgent", "platform", "language", "languages", "onLine", "cookieEnabled", "hardwareConcurrency"];    var table="<table class="tableau">";    for (var i=0; i<properties.length; i++) {        table+="<tr><td class='property'><code>"+properties[i]+"</code></td>";        var val=navigator[properties[i]];        switch(typeof val) {            case "string":              table+="<td class='value string'>"+val+"</td></tr>";                          break;            case "boolean":              table+="<td class='value boolean'>"+val+"</td></tr>";                          break;            case "number":              table+="<td class='value number'>"+val+"</td></tr>";                          break;            case "object":              table+="<td class='value array'>["+val.toString()+"]</td></tr>";                          break;            case "undefined":              table+="<td class='value undefined'>non défini pour ce navigateur</td></tr>";                          break;        }     }    table+="</table>";    document.getElementById("tableau").innerHTML=table;    console.log(navigator);}</script></head><body ><h1>Récupère toutes les infos sur l'objet navigator</h1><p>Ce script extrait les infos disponibles communes à tous les browsers à partir des propriétés de <code>navigator</code>.</p><div id="tableau"></div><script>    getNavigator();</script><p>La détection du navigateur et de sa version nécessite des manipulations de chaînes de caractères assez fastidieuses et de nombreux tests pour valider la fiabilité des traitements.<p>Le principe est d'abord de détecter la <code>plateform</code> et le <code>vendor</code>.<p>Ensuite, l'analyse de <code>appVersion</code> permet d'affiner en cherchant dans la chaîne les structures du type :    <ul>        <li>Chrome/VV.xxx</li>        <li>Opera/VV.xxx</li>        <li>Edge/VV.xxx</li>        <li>Safari/VV.xx</li>    </ul>    Avec VV, le numéro de version.</body></html>

Troisième édition Tout JavaScript chez Dunod

En savoir plus
Sortie le 4 janvier 2023

Version papier 29€90
Format électronique 22€99.

Commandez en ligne

Dunod Fnac Amazon

Le graph des objets JavaScript

Chargement
en cours...

Script : Information sur le navigateur

Exécution du script

Code source

Troisième édition Tout JavaScript chez Dunod

Chercher une fonction, un objet, ...

Le graph des objets JavaScript