Le DOM HTML : Objets Location, History, Navigator, Screen

Objet de la fiche :

État de la fiche

Plan de la fiche :

| Avant-propos |
| Rappels structure |
| window.location |
| window.navigator |
| window.history |
| window.screen |

Avant propos

Parmi les objets abordés ici, il faudra apporter une attention particulière à l'objet navigator afin d'ajuster des actions spécifiques en fonction du navigateur utilisé par le visiteur de votre site Web. De même pour l'objet screen afin d'adapter le visuel du site aux différentes dimensions d'écran des internautes.

Rappels de la structure des objets du DOM

Détails de la structure
Objets	Commentaires
window.location	URL de la page en cours.
window.navigator	Informations sur le navigateur utilisé par l'internaute.
window.history	Navigation dans l'historique du navigateur.
window.screen	Renseignements sur les propriétés de l'écran de l'internaute.

Objet window.location

window.location permet de récupérer l'url complète de la page en cours.
Les propriétés et les méthodes sont référencées par rapport à l'objet location

location.propriétés et
location.méthodes,

eux même référencés par rapport à l'objet window

window.location.propriétés et
window.location.méthodes

Propriétés de window.location
Proprétés	Commentaires
hash	référence dans page, ex: #ref1(ancre)
host	machine hôte
hostname	nom de la machine hôte
href	Fourni l'URL complète de la fenêtre actuelle ou d'une adresse de fenêtre spécifique
pathname	chemin
port	port utilisé, ex: 80, 8000... La propriété port ne contient une valeur que si une mention de port figure réellement dans l'adresse URL actuelle.
protocol	protocole: HTTP, FTP, etc...
search	Fourni une chaîne de caractères qui, séparée par un point d'interrogation, fait partie de l'adresse URL actuelle, par exemple: http://monwebfacile.free.fr/index.htm?info= Netscape. Dans ce cas, la propriété contient la valeur ?info=Netscape.

Méthodes de window.location
Méthodes	Commentaires
reload()	Recharge la page en cours. A le même effet que le bouton recharger/actualiser du navigateur. Syntaxe : window.location.reload()"
replace()	Charge une nouvelle page sans l'enregistrer dans l'historique. Syntaxe : window.location.replace('fichier2.htm')"

Exemple avec les propriétés décrites ci dessus

Objet window.navigator

Généralités

Cet objet permet de récupérer des informations sur le navigateur qu'utilise le visiteur. Toutes les propriétés de l'objet navigator sont en lecture seule, elles servent uniquement à récupérer des informations et non à les modifier. Ces informations peuvent permettre de faire telle ou telle action en fonction du navigateur utilisé.

Les propriétés sont référencées par rapport à l'objet navigator => navigator .propriétés, lui même référencé par rapport à l'objet window => window. navigator .propriétés

Par exemple pour lire la propriété length (dimension du tableau) de l'objet mimeType il faudra se référencer de la manière suivante : window.navigator.mimeType.length

Propriétés

Propriétés de window.navigator
Propriétés	Commentaires	Attributs	Syntaxe	Commentaires
appName	Nom du navigateur		navigator.appName
appVersion	Version du navigateur		navigator.Version
platform	Plateforme utilisateur		navigator.platform
language	Langage plateforme		navigator.language
appCodeName	Code du navigateur		navigator.appCodeName
userAgent	Entête http envoyée par le Navigateur		navigator. userAgent
plugins	Plugins installés sur le Navigateur. Restitution sous forme de tableau.	.length	navigator. plugins.length	Nombre de plugins avec la propriété
		.name	navigator. plugins[index du plugin].name	Nom du plugin
		.fileName	navigator. plugins[index du plugin].fileName	Nom du fichier plugin
		.description	navigator. plugins[index du plugin].description	Description du plugin
mimeTypes	types Mime reconnus par le Navigateur. Restitution sous forme de tableau.	.length	navigator. mimeType. length	Nombre de types Mime reconnus
		.type	navigator. mimeType [index du MIME]. type	Type du MIME
		.description	navigator. mimeType [index du MIME]. description	Description du MIME
		enabledPlugin.name	navigator. mimeType [index du MIME]. enabledPlugin.name	Nom du plugIn nécessaire pour supporter le type de MIME
		.suffixes	navigator. mimeType [index du MIME]. suffixes	Extensions des noms de fichiers reconnus par le type de MIME

Exemple de récupération des informations du navigateur (Attention le navigateur Internet Explorer retourne un nombre de plugin =0 et un nombre de mimeType = 0).

Info + : Méthode si on désire initialiser des variables booléennes et les utiliser pour faire des tests de navigateur tout au long du code javascript à l'intérieur de la page. Les tests consistent alors à regarder uniquement si la variable contient 1 pour une réponse positive au 0 pour une réponse négative.

Exemple d'utilisation du mimeType et des plugins :

Objet window.history

L'objet history permet de naviguer dans l'historique du navigateur et d'utiliser les fonctions page précédente back(), page suivante forward(). Cet objet n'est pas accessible en lecture. Il est donc impossible, pour des raisons de confidentialité, de lire l'ensemble des URL contenu dans l'historique.
Les propriétés sont référencées par rapport à l'objet history => history.propriétés, lui même référencé par rapport à l'objet window => window. history .propriétés ou window. history .méthodes()

Propriétés de window.history
Propriétés	Commentaires	Syntaxes
length	Donne le nombre d'articles de la liste history.	window.history.length
next	Donne si elle existe la première URL consultée après la page courante.	window.history.next
previous	Donne la dernière URL consultée avant la page courante.	window.history.previous

Méthodes de window.history
Méthodes	Commentaires	Syntaxes
back()	Retour à la page précédente	Exemples avec la balise de lien <a href= "window.history.go(-1)"> Retour page précédente </a> <a href= "window.history.go(-3)"> Retour page -3 dans l'historique </a> <a href= "window.history.back()"> Retour page précédente </a> <a href= "window.history.forward()"> Page suivante si elle existe </a>
forward()	Retour à la page suivante
go()	Redirige vers une page de l'historique

L'objet screen

L'objet Screen permet d'obtenir des renseignements sur les propriétés et la qualité d’affichage de l'écran de l'internaute.

Propriétés

Les propriétés sont référencées par rapport à l'objet window => window .propriétés.

Résolutions verticales et horizontales

window.screen.height : Taille verticale de l'écran
window.screen.width : Taille horizontale de l'écran
window.screen.availHeight : Taille utile verticale de l'écran
window.screen.availWidth : Taille utile horizontale de l'écran

screen.availHeight et screen.availWidth donnent en pixels la hauteur ou la largeur maximale disponible que peut prendre une application en mode plein écran. Elles se différencient de screen.height et screen.width quand des éléments d'écran fixes comme des barres de tâches toujours visibles etc. occupent une partie de l'écran en haut, en bas, à droite ou à gauche. Si l'utilisateur utilise une barre de tache fixe de 50 pixels de haut et possède un écran de 768 pixels de haut, screen.height retournera 768, screen.availHeight ne retournera que 718.

Résolutions et profondeur de couleurs

window.screen.pixelDepth (résolution des couleurs)

Donne l'intensité de couleurs de l'écran de l'utilisateur en bits par pixel. Cette propriété a une valeur quand l'écran de l'utilisateur utilise une palette de couleurs en interne. Dans le cas contraire, undefined est renvoyé (Netscape) ou null (Explorer Internet MS), et vous devez alors questionner la propriété colorDepth.

Intensité de couleurs de l'écran de l'utilisateur en bits par pixel.

window.screen.colorDepth (Profondeur de couleurs)

Nombre de bits qu'utilise l'écran de l'utilisateur pour la représentation d'une couleur à chaque point pixel de l'écran. Une valeur de 16 correspond à un nuancier de 2 puissance 16 couleurs soit 65536 possibilités.