Récupérer les paramètres d'URL d'une page Web en Javascript

Pour partager cette vidéo sur les réseaux sociaux ou sur un site, voici son url :


Sujets que vous pourriez aussi aimer :


Exploiter les paramètres d'URL en Javascript

Une même page Web d'un site Internet peut proposer une multitude de déclinaisons. Définie par son adresse conforme, sans paramètre, elle affiche le rendu prévu par défaut. Mais lorsque des paramètres lui sont fournis dans l'Url, elle les exploite pour adapter dynamiquement son contenu à la demande. C'est une façon productive de développer un site Web en proposant une page HTML dynamique pouvant en construire une infinité d'autres, selon les données transmises.



Dans l'exemple de la capture ci-dessus, le rendu proposé n'est pas celui de la page par défaut lorsqu'elle est appelée par son url originelle, se terminant par le nom du fichier Html : parametres-url-javascript.html. L'url de la page proposée sur la capture est la suivante : parametres-url-javascript.html?38-Isere. Il s'agit bien de la même adresse fournie par la même page pour le navigateur. Mais des paramètres supplémentaires (38-Isere) lui ont été passés après le symbole du point d'interrogation (?) qui les annonce.

Sur la page d'origine, l'internaute a cliqué sur la représentation graphique du département de l'isère (38). Le clic sur cette zone délimitée a rechargé la page par un lien Html organique (Href), ajoutant ces paramètres contextuels. Le code Javascript les a réceptionnés et traités au chargement pour fournir un contenu adapté à la demande, totalement différent de celui de la page d'origine. Et pour ce faire, nous le verrons, nous réécrirons dynamiquement la structure Html de la page Web.

Sources et concept
Pour réaliser cette application permettant de charger dynamiquement le contenu de la page Web, selon les paramètres qui lui sont passés, nous proposons de débuter depuis une structure existante. Il s'agit de l'application Internet de la formation précédente consistant à afficher des informations dynamiques et contextuelles, à portée de souris, selon les coordonnées de son pointeur.

• Télécharger le fichier parametres-url-javascript.rar en cliquant sur son lien,
• Puis, le décompresser dans le dossier de votre choix,

Vous obtenez le fichier de la page Web principale (parametres-url-javascript.html), accompagné de ses ressources externes dans les sous dossiers.

Vous notez par exemple la présence des représentations graphiques des départements, dans le sous dossier cartes.



Certaines d'entre elles devront être intégrées dynamiquement sur la page Web, en fonction des paramètres de son url.

• Dans le dossier de décompression, double cliquer sur le fichier parametres-url-javascript.html pour l'ouvrir dans un navigateur Internet,
• A l'aide de la liste déroulante de la page Web, sélectionner un département, par exemple l'Ardèche,
• Puis, glisser la souris sur la représentation graphique des départements qui apparaît dans le cadre situé sur la gauche de la page,

Conformément à l'application de la formation précédente, des informations dynamiques contextuelles s'affichent dans un calque en mouvement, qui suit le déplacement de la souris. Dans le même temps, une miniature zoomée du département survolé, s'affiche dans le cadre situé sur la partie droite de la page Web.

• Cliquer alors sur l'un département de la représentation graphique, par exemple la Loire (42),

Le contenu de la page Internet semble se vider ou plutôt se réinitialiser. C'est le cas en effet. Le clic a occasionné l'appel de cette même page par le biais d'un lien en dur, mais en lui passant des paramètres. Si vous consultez la barre d'adresse du navigateur, vous remarquez leur présence :

parametres-url-javascript.html?42-Loire

Ils figurent après le point d'interrogation. De cette manière, le navigateur continue de considérer l'adresse originelle (parametres-url-javascript.html). Il y a le numéro du département et son texte. Tous deux sont séparés d'un tiret pour simplifier leur traitement. D'une manière générale, vous devez éviter l'insertion d'espaces et de caractères latins (Les accents par exemple) dans une Url. Ces liens organiques sont programmés sur les zones délimitées de la fonction zones_cartes du script externe. Ce script est lui-même placé dans le sous dossier js de l'application. C'est ce que nous avions étudié lors de la formation précédente.

Récupérer les paramètres de l'URL
L'objectif dans un premier temps consiste à vérifier la présence des paramètres dans l'URL. L'astuce consiste à chercher le point d'interrogation (?). S'il n'est pas présent, rien ne doit changer pour que la page Web d'origine propose son fonctionnement par défaut. Dans le cas contraire, elle doit être restructurée pour offrir les informations dynamiques correspondant aux paramètres de la demande internaute.

• Dans le dossier de décompression, cliquer avec le bouton droit de la souris sur le fichier parametres-url-javascript.html,
• Dans le menu contextuel, choisir de l'ouvrir avec un éditeur tel que le Notepad,

Nous accédons ainsi à la structure Html de la page Web mise en page grâce à l'affectation de styles régis par la feuille de styles mef.css, déclarée en référence dans la section Head. Vous y notez de même la référence au fichier de script externe.

Au milieu de la page, nous retrouvons l'organisation imposée par la présence des calques : balises Html Div.

<div class="centre">
<div class="titre_centre" id="titre">
<select id="choix_dep" class="liste" onChange="afficher_carte()">
<option value="00">Sélectionnez un département</option>
<option value="07-Ardèche">07-Ardèche</option>
<option value="26-Drome">26-Drome</option>
<option value="38-Isère">38-Isère</option>
<option value="69-Rhone">69-Rhone</option>
<option value="73-Savoie">73-Savoie</option>
</select>

<div id="calque_ville" class="liste_div" style="float:right;">
&nbsp;
</div>
</div>
</div>

<div class="colonne" id="colonne_gauche" onMouseOver="afficher_souris()" onMouseOut="sortir_souris()">
&nbsp;
</div>
<div class="colonne" id="colonne_droite">
&nbsp;
</div>

<div class="centre">
<div class="titre_centre" id="apercu">
</div>
</div>

Chacun de ces calques est explicitement désigné par un identifiant unique (attribut id). C'est grâce à ces identifiants que nous pourrons remodeler la structure Html de la page par le code Javascript.

• Faire défiler le code vers le bas jusqu'à atteindre la section de script située entre les balises fermantes Body et Html,

Nous affichons ainsi le code Javascript des fonctions qui ont permis de réaliser l'application réagissant aux coordonnées du pointeur de la souris. Nous devons récupérer les paramètres de l'Url, s'ils existent, dans la partie publique, soit en dehors de toute fonction. Ces instructions se déclencheront donc avec le chargement de la page. Ainsi, nous pourrons adapter son contenu en toute transparence pour l'internaute, comme si le contenu originel n'avait jamais existé.

• En dessous de la déclaration publique de la variable bascule, ajouter l'instruction suivante :

var position = window.location.href.indexOf('?');

Nous déclarons une variable (position) que nous affectons dans la foulée. La propriété location de l'objet Javascript window permet d'accéder aux éléments de l'url de la page Web en cours. Sa propriété dérivée href désigne explicitement cette url, retranscrite dans la barre d'adresse du navigateur. La méthode indexOf renvoie ensuite la position de l'occurrence qui lui est passée en paramètre, dans la chaîne de texte sur laquelle elle est appliquée, soit l'Url. Nous avions démontré l'intérêt de cette méthode dans la formation du diaporama Web en Javascript pour découper les noms de fichiers. Elle renvoie -1 lorsque l'occurrence n'est pas trouvée et sa position lorsqu'elle est bien présente. C'est ce que nous nous proposons de vérifier.

• A la suite du code, ajouter l'instruction de test temporaire suivante :

alert(position);

La fonction Javascript alert permet d'afficher dans une boîte de dialogue, les éléments qui lui sont passés en paramètre.

• Enregistrer les modifications (CTRL + S) et basculer sur le navigateur Web,
• Rafraîchir la page à l'aide de la touche F5 du clavier,

Lors des manipulations précédentes, nous avions cliqué sur le département de la Loire. C'est la raison pour laquelle, au chargement de la page, le code Javascript décèle la présence de paramètres. Et grâce à la méthode indexOf appliquée sur la chaîne ainsi restituée, la boîte de dialogue alert confirme la valeur de position trouvée pour le symbole du point d'interrogation. Nous devons exploiter cette valeur pour extraire seulement la partie utile de l'url, celle des paramètres.

• Revenir dans l'éditeur de code de la page Web,
• Passer la ligne de la fonction alert en commentaire en la préfixant de deux slashs (//),
• Puis ajouter le test suivant :

if(position!=-1)
{

}

En effet, le traitement dynamique des paramètres par le code ne doit se poursuivre que s'ils sont bien présents. Et c'est donc l'instruction conditionnelle if en Javascript qui permet de vérifier ce critère sur la variable position, avant de poursuivre.

• Dans les bornes de l'instruction if, ajouter les lignes de code suivantes :

var num_dep=""; var texte_dep="";
var fin_url = window.location.href.substr(position + 1);
alert(fin_url);

En prévision des deux paramètres à recevoir, celui du numéro et celui du texte du département, nous déclarons les variables num_dep et texte_dep appropriées. Puis, nous déclarons la variable fin_url que nous affectons dans la foulée comme précédemment. Les propriétés href et location de l'objet window permettent d'accéder de nouveau à l'adresse de la page Internet en cours. Mais cette fois, nous lui appliquons la méthode substr qui permet de prélever seulement une partie de la chaîne sur laquelle elle est appliquée. Sa syntaxe habituelle est la suivante :

var variable = chaine_texte.substr(pos_depart, longueur)

Elle requiert normalement deux paramètres : la position à partir de laquelle doit être prélevée l'information (pos_depart) et la longueur sur laquelle cette information doit être découpée. Dans l'instruction que nous avons utilisée, nous n'avons défini qu'un seul paramètre (position + 1), soit le point de départ. La méthode substr est souple, lorsque le second paramètre n'est pas proposé, elle prélève l'information jusqu'à la fin de la chaîne. Puisque nous avons défini le point de départ après le point d'interrogation (position + 1), nous devrions récupérer les paramètres uniquement. C'est ce que nous allons tester.

• Enregistrer les modifications et basculer sur le navigateur Internet,
• Rafraîchir la page Web à l'aide de la touche F5 du clavier,

Comme vous le constatez et comme l'illustre la capture ci-dessus, nous avons en effet réussi à isoler la partie utile de l'URL, soit celle des paramètres. Nous devons purger cette information des tirets afin de récupérer chaque donnée proprement. Pour ce faire, nous proposons d'exploiter la méthode Javascript replace que nous avions démontrée dans la formation de la fonction Javascript pour le traitement numérique.

• Avant la ligne de la fonction alert, ajouter l'instruction suivante :

fin_url = fin_url.replace(/-/g,"");

A l'instar des expressions régulières, cette syntaxe passée en premier paramètre de la fonction replace, permet de réaliser une recherche sur toutes les occurrences du tiret, dans la chaîne fin_url. Et donc nous proposons de remplacer chaque tiret par un espace, comme mentionné en deuxième argument de la méthode.

• Enregistrer les modifications et basculer sur le navigateur,
• Rafraîchir la page pour vérifier le test de la fonction alert,

A chaque étape nous progressons dans la bonne direction. Désormais, les deux paramètres sont explicitement séparés. Ils peuvent être récupérés et stockés indépendamment grâce à la méthode substr. Pour le numéro, il suffit de prélever la chaîne sur les deux premiers caractères. Pour le texte, il suffit de prélever à partir de la position 3, pour ne pas inclure l'espace.

• Revenir dans l'éditeur de code de la page Web,
• Passer la fonction alert en commentaire,
• Puis, ajouter les instructions suivantes :

num_dep = fin_url.substr(0,2);
texte_dep = fin_url.substr(3);

Comme nous l'avons expliqué plus haut, dans le deuxième cas, nous ne spécifions pas le second argument de la méthode pour poursuivre le prélèvement jusqu'à la fin de la chaîne. Il est temps d'exploiter ces paramètres pour reconstruire dynamiquement le code Html de la page. Et nous proposons de commencer par le calque du titre (identifiant titre), en restituant clairement ces informations.

• A la suite du code, ajouter l'instruction suivante :

document.getElementById("titre").innerHTML = "Département : <strong>" + texte_dep + "</strong>(" + num_dep + ")";

La méthode getElementById de l'objet Javascript document permet de désigner un contrôle Html par son identifiant passé en paramètre (titre). Dès lors, sa propriété innerHTML permet d'accéder à son contenu afin de le réécrire par le code Html. Nous concaténons des informations statiques aux variables des paramètres, mises en forme par des balises Html. La balise Strong permet de mettre en gras les informations qu'elle encadre.

• Enregistrer les modifications et basculer sur le navigateur,
• Rafraîchir la page Internet avec la touche F5 du clavier,

La personnalisation selon les informations récupérées dans l'Url peut commencer. D'ailleurs la liste déroulante des départements a disparu au profit du titre, annonçant le contenu à venir, dans cette nouvelle version de la page, retravaillée dynamiquement par le code Javascript. Le test est donc un succès. Il s'agit désormais d'afficher la miniature du département concerné (La loire) dans le calque colonne_gauche. Nous devons y inscrire la balise Html img, grâce comme toujours, à la propriété innerHTML d'un div en Javascript.

• Revenir dans l'éditeur de code et ajouter l'instruction suivante :

document.getElementById("colonne_gauche").innerHTML = "<img src='cartes/" + num_dep + ".gif' alt='" + texte_dep + "' />";

Nous exploitons l'attribut src de la balise Html img pour reconstruire dynamiquement le chemin d'accès à l'image correspond au choix de l'internaute, selon les informations passées en paramètres et récupérées. Comme nous l'avions présenté au début de cette formation, ces images sont bien situées dans le sous dossier cartes (cartes/), sont préfixées du numéro du département (num_dep) et possèdent l'extension gif. Notez dans la syntaxe que le chemin d'accès est encadré de simples côtes (') car les doubles côtes (") sont déjà exploitées pour l'expression globale du balisage.

• Enregistrer les modifications, basculer sur le navigateur et rafraîchir la page,

La personnalisation selon la demande internaute se poursuit, grâce aux paramètres transmis par le biais de l'url de la page. Désormais, par reconstruction du code HTML en Javascript, nous avons réussi à charger l'image du département qui coïncide. La suite est classique, nous souhaitons afficher des informations en adéquation dans le calque de droite (colonne_droite), par reconstruction de son code Html.

• Revenir dans l'éditeur de code et ajouter les lignes suivantes :

document.getElementById("colonne_droite").innerHTML = "Vos idées de sorties pour le département :";
document.getElementById("colonne_droite").innerHTML += "<br/><br />";
document.getElementById("colonne_droite").innerHTML += "<span style='color:#CC3300;font-size:24px;'>" + texte_dep + " (" + num_dep + ")</span>";
document.getElementById("colonne_droite").innerHTML += "<br/><br /><span style='font-size:14px;font-weight:normal;'>Synthèse serveur consolidée à ajouter ici</span>";

Nous réalisons l'inscription sur plusieurs lignes par concaténation (+=) mais le principe reste le même. Nous assemblons des informations textuelles statiques avec les paramètres récupérés dans les variables et mis en forme par des balises Html.



Le résultat est convaincant. Il est totalement personnalisé aux informations transmises et demandées par l'internaute, au clic. A chaque clic sur un nouveau département, nous obtiendrons une page remodelée, nouvelle et donc différente de la précédente. Mais pour autant, le travail est terminé. C'est l'avantage du code Javascript mêlé aux paramètres d'Url. Une seule page permet de créer des points d'entrée déclinables à l'infini par le code. Et quand nous aborderons la réécriture d'URL avec le code serveur (PHP), nous verrons que chacun de ces points d'entrée peut se référencer naturellement et indépendamment pour le moteur de recherche Google. Nous avons donc une fois de plus prouvé la nécessité de l'exploitation d'un code client pour améliorer la productivité du contenu.

Le code complet pour la récupération et le traitement des paramètres d'URL est le suivant :
var position = window.location.href.indexOf('?');
//alert(position);

if(position!=-1)
{
var num_dep=""; var texte_dep="";
var fin_url = window.location.href.substr(position + 1);
fin_url = fin_url.replace(/-/g," ");
//alert(fin_url);

num_dep = fin_url.substr(0,2);
texte_dep = fin_url.substr(3);

document.getElementById("titre").innerHTML = "Département :<strong>" + texte_dep + "</strong> (" + num_dep +")";
document.getElementById("colonne_gauche").innerHTML = "<img src='cartes/" + num_dep + ".gif' alt='" + texte_dep + "'/>";

document.getElementById("colonne_droite").innerHTML = "Vos idées de sorties pour le département :";
document.getElementById("colonne_droite").innerHTML += "<br/><br />";
document.getElementById("colonne_droite").innerHTML += "<span style='color:#CC3300;font-size:24px;'>" + texte_dep + " (" + num_dep + ")</span>";
document.getElementById("colonne_droite").innerHTML += "<br/><br /><span style='font-size:14px;font-weight:normal;'>Synthèse serveur consolidée à ajouter ici</span>";
}

• Dans le dossier de décompression, double cliquer de nouveau sur le fichier de la page Web pour l'exécuter dans sa version d'origine,
• Choisir le département de la Savoie à l'aide de la liste déroulante,
• Sur la représentation graphique du calque de gauche, cliquer sur le département des Hautes Alpes,

Nous n'avons rien ajouté et pourtant nous obtenons en réponse, une nouvelle page Web, personnalisée à la demande de l'internaute. Les paramètres transmis dans l'URL sont différents. En conséquence, la page Web reconstruite est différente.