Les Fiches de MonWebFacile





Chapitre

Fiche

 

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

Objet de la fiche :

État de la fiche En cours


Plan de la fiche :

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


Les 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



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é.

Objet Navigator

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 :

Exemple mimeType

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 Tests
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.

Objet Screen

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.


Respectons la propriété intellectuelle