Informatique


Les objets location et history

Aller à

L'objet location

Neuf propriétés intéressantes:

  • href revoie l'url complète de la page
  • host revoie le domaine de la page avec le numéro de port
  • hostname revoie le domaine de la page sans le numéro de port
  • port revoie le port d'écoute (vide par défaut)
  • pathname revoie le chemin relatif de la page
  • protocol revoie http: ou https:
  • search revoie le les paramètres de recherche, après le ? inclus
  • hash revoie la partie de l'url qui suit # inclus
  • origin revoie la page d'origine de la page en cours de consultation

Démo
<script>
var txt = "";
txt += "<p>URL: <b>" + location.href + "</b></p>";
txt += "<p>Domaine + port: <b>" + location.host + "</b></p>";
txt += "<p>Domaine sans port: <b>" + location.hostname + "</b></p>";
txt += "<p>Le port: <b>" + location.port + "</b> (il est vide!)</p>";
txt += "<p>Chemin relatif: <b>" + location.pathname + "</b></p>";
txt += "<p>Protocol de transfert: <b>" + location.protocol + "</b></p>";
txt += "<p>Recherche: <b>" + location.search + "</b></p>";
txt += "<p>Le hashtag: <b>" + location.hash + "</b></p>";
txt += "<p>Page d'origine: <b>" + location.origin + "</b></p>";
document.write(txt);
</script>

L'objet history

Trois méthodes intéressantes:

  • back() retourne d'une page en arrière dans l'historique
  • forward() avance d'une page en avant dans l'historique
  • go(int nbr) retourne ou avance (location.go(-1) correspnd à un location.back et location.go(1) correspond à un location.forward)

S'il n'existe aucun historique permettant de réaliser la navigation, aucune action ne sera réalisée.

Le code...
<button id=1>En arrière  d'1 page</button>
<button id=2>En avant d'1 page</button>
<button id=3>En arrière de 2 pages</button>
<button id=4>En avant de 3 pages</button>
<script>
var hist=document.getElementsByTagName("button");
for(var i=0;i<hist.length;i++){
	hist[i].addEventListener("click",mafct);
}
function mafct(e){
	if(e.target.id==="1"){alert("On va en arrière!");history.back();}
	else if(e.target.id==="2"){alert("On va en avant!");history.forward();}
	else if(e.target.id==="3"){alert("On va 2 pages en arrières!");history.go(-2);}
	else if(e.target.id==="4"){alert("On va 3 pages en avant!");history.go(3);}
	else {alert("Oups!");}
}
</script>