Window location en JavaScript

L'interface location permet de connaitre les éléments de l'URL du document dans la fenêtre courante: le nom de domaine, le nom de fichier, etc.

Location est un sous-objet de Windows. C'est un objet coté-client (donc créé par le navigateur) et dont l'interface est implémentée en JavaScript depuis la version 1.0.
Dans HTML 5, location est une interface intégrée à DOM et aussi un attribut de HTMLDocument.

Une URL se décompose en domaine, nom de fichier...

Prenons cette page comme exemple d'URL à laquelle on ajoute tous les les paramètres possibles:

https://www.xul.fr:80/ecmascript/window-location.php#content?name=value

Elle se décompose ainsi:

[http:]//[www.xul.fr]:[80][/ecmacript/windows-location.php]#[content]?[name=value]

Ce qui, traduit en attributs de l'objet location correspond à:

[protocol][host][port][pathname][hash][search]

Les propriétés de location ont dans l'exemple ont les valeurs suivantes:

protocol http:
host [www.xul.fr]:80
hostname www.xul.fr
pathname /ecmascript/window-location.php
port 80
hash #content
search ?name=value

En outre, href correspond à l'URL complète.

Location assigne ces éléments à des attributs

Propriétés de location
protocol

Contient le protocole de la page, incluant le caractère deux points.

http:

Ou ftp: etc.

port

Numéro du port, qui est optionnel. Le caractère deux-points est un séparateur et ne fait pas partie de la valeur de la propriété.

hostname

Chaine composée des sous-domaines éventuels, du domaine avec son extension. Exemple:

www.xul.fr
host

Combinaison de hostname + port. Exemple:

www.xul.fr:80
pathname

Répertoire et nom de fichier de la page. Exemple:

/ecmascript/tutoriel/window-location.php
hash

Le terme hash désigne le symbole dièse: # qui introduit une adresse à l'intérieur d'une page. La valeur de la propriété et le nom de l'ancre qui suit le symbole. Exemple:

dans /ecmascript/window-location.php#content, l'ancre est content.
search

Liste des variables et leurs valeurs. Le code ? est inclut dans la valeur de la propriété. Exemple:

?nom=valeur&nom2=valeur2

Il sera facile avec le script de démonstration d'essayer toutes les combinaisons possible et voir les valeur retournées.

Ses méthodes permettent de changer d'URL de la page

Méthodes de location
assign

La méthode permet en changeant la location de charger une nouvelle page. Exemple:

window.location.assign("https://www.xul.fr/ecmascript");
reload

Recharge la page actuellement affichée.

windows.location.reload();
replace

Remplace la page affichée par une autre. L'historique devient celui de la page remplaçante.

window.location.replace("https://www.xul.fr/ecmascript/");

La différence entre replace et assign est que l'on ne peut plus utiliser le bouton retour après replace.

Exemple d'utilisation de location pour changer les composantes de l'URL

Les propriétés de location peuvent être lues ou assignées.
Par exemple on affiche le chemin de la page ainsi:

document.write(location.pathname)

Et on change la page ainsi:

location.href = "url"

La méthode reload permet aussi de recharger la page selon la nouvelle URL.

La démonstation permet d'entrer une URL dans un formulaire, d'afficher les propriétés et d'exécuter les méthodes de l'objet et voir les valeurs des propriétés ainsi changées.

var url = document.loc.url.value;
var storage = document.getElementById("storage");

var href = "href  " + location.href 
var protocol = "protocol " + location.protocol 
var hostname = "";//"hostname " + location.hostname 
var port = "port " + location.port 
var host = "host " + location.host 
var pathname = "pathname " + location.pathname 
var hash = "hash " + location.hash 
var search = "search " + location.search 

var data = href + protocol + hostname + port + host + pathname + hash + search;
storage.innerHTML = data;

Pour utiliser la démo, on modifie les paramètres de l'URL qui doit cependant rester celle de la page de démonstration si l'on veut pouvoir afficher ces paramètres avec le bouton "propriétés".
Les autres boutons appellent les méthodes de leur libellé.

Entrer une URL et cliquer sur Propriétés pour les afficher dans la page ou sur les autres boutons pour activer une méthode.

Démonstration

URL

Code complet de la démo:


function properties()
{
  var url = document.loc.url.value;
  var storage = document.getElementById("storage");
  var href = "href  " + location.href ;
  var protocol = "protocol " + location.protocol;
  var hostname = "";//"hostname " + location.hostname;
  var port = "port " + location.port;
  var host = "host " + location.host;
  var pathname = "pathname " + location.pathname;	
  var hash = "hash " + location.hash;
  var search = "search " + location.search;
  var data = href + protocol + hostname + port + host + pathname + hash + search;
  storage.innerHTML = data;
}

function replace()
{
  var url = document.loc.url.value;
  window.location.replace(url);
}

function reload()
{
  window.location.reload();
}

function assign()
{
  var url = document.loc.url.value;
  window.location.assign(url);
}

Voir aussi

© 2008-2012 Xul.fr