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>
