Texte personnalisé en fonction des paramètres d'URL ?

Version imprimable

07/11/2014, 19h29
adrien5555

Texte personnalisé en fonction des paramètres d'URL ?
bonjour à tous,
je ne sais pas développer, mais j'ai quelques notions basiques, alors merci de votre indulgence pour mon premier message :oops:

ce que je voudrais faire est simple, mais assez cool :

j'ai trouvé ce code ici pour remplacer du texte HTML avec du javascript :
Code:

1 2 3 4 5 <h1 id="header">Georges</h1> <script> var element = document.getElementById("header"); element.innerHTML = "Adrien"; </script>
A la place du element.innerHTML = "Adrien", j'aimerais définir une variable "nom", que l'URL contienne la valeur, je ne sais pas si je suis clair...
...autrement dit, j'aimerais que le texte du H1 soit remplacé par une valeur contenue dans une variable "nom" présente dans l'URL, par exemple http://www.mondomaine.com/?nom=Adrien

Est ce que c'est possible avec Javascript, comment modifier le code svp ?

ca m'aiderait beaucoup !

Adrien

Voilà une petite fonction pour récupérer un paramètre d'URL:
Code:

1 2 3 4 5 function getURLParameter(name) { name = name.replace(/[\[]/, "\\[").replace(/[\]]/, "\\]"); var regex = new RegExp("[\\?&]" + name + "=([^&#]*)"), results = regex.exec(location.search); return results === null ? "" : decodeURIComponent(results[1].replace(/\+/g, " ")); }
Pour l'utiliser ensuite, c'est très simple:

Code:

element.innerHTML = getURLParameter("nom");

07/11/2014, 22h09
adrien5555

mais...c'est génial !

merci infiniment Sylvain.

je n'aurais jamais cru trouver si vite la solution grâce à ce forum :D

bon week end !
Adrien
08/11/2014, 10h38
NoSmoking

Bonjour,
@SylvainPV : a mettre en complément dans la FAQ.
18/11/2014, 19h18
adrien5555

Bonjour à tous,

un petit complément suite à l'utilisation de cette fonction. Ca fonctionne très bien, mais avec un paragraphe entier dans la variable (attention juste aux caractères spéciaux, certains ne passent pas le caractère '%').

Le scénario pour lequel j'utilise la fonction est celui-là :

- je fournis un lien vers une page A à un utilisateur. Le lien contient des variables, et la page insèrera ces variables dans le contenu, grâce à la super fonction de SylvainPV.

Maintenant, si l'utilisateur navigue et clique sur une page B, les variables ne sont malheureusement pas "emmenées avec" et donc, plus moyen d'avoir un contenu personnalisé...

Sauriez-vous s'il y a un moyen de faire cela ?

J'ai très peu de liens internes car le site ne fait que 4 pages, peut-etre en insérant les variables dans l'attibut href des liens ??

Merci encore, c'est déjà super comme cela.
Adrien

Une version plus évoluée
utilisée par ExtJS elle reste aisément compréhensible pour s'en inspirer.

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
function getFromQueryString (queryString, recursive) {
        var parts = queryString.replace(/^\?/, '').split('&'),
            object = {},
            temp, components, name, value, i, ln,
            part, j, subLn, matchedKeys, matchedName,
            keys, key, nextKey;
 
        for (i = 0, ln = parts.length; i < ln; i++) {
            part = parts[i];
 
            if (part.length > 0) {
                components = part.split('=');
                name = decodeURIComponent(components[0]);
                value = (components[1] !== undefined) ? decodeURIComponent(components[1]) : '';
 
                if (!recursive) {
                    if (object.hasOwnProperty(name)) {
                        if (!Ext.isArray(object[name])) {
                            object[name] = [object[name]];
                        }
 
                        object[name].push(value);
                    }
                    else {
                        object[name] = value;
                    }
                }
                else {
                    matchedKeys = name.match(/(\[):?([^\]]*)\]/g);
                    matchedName = name.match(/^([^\[]+)/);
 
                    //<debug error>
                    if (!matchedName) {
                        throw new Error('[getFromQueryString] Malformed query string given, failed parsing name from "' + part + '"');
                    }
                    //</debug>
 
                    name = matchedName[0];
                    keys = [];
 
                    if (matchedKeys === null) {
                        object[name] = value;
                        continue;
                    }
 
                    for (j = 0, subLn = matchedKeys.length; j < subLn; j++) {
                        key = matchedKeys[j];
                        key = (key.length === 2) ? '' : key.substring(1, key.length - 1);
                        keys.push(key);
                    }
 
                    keys.unshift(name);
 
                    temp = object;
 
                    for (j = 0, subLn = keys.length; j < subLn; j++) {
                        key = keys[j];
 
                        if (j === subLn - 1) {
                            if (Ext.isArray(temp) && key === '') {
                                temp.push(value);
                            }
                            else {
                                temp[key] = value;
                            }
                        }
                        else {
                            if (temp[key] === undefined || typeof temp[key] === 'string') {
                                nextKey = keys[j+1];
 
                                temp[key] = (Ext.isNumeric(nextKey) || nextKey === '') ? [] : {};
                            }
 
                            temp = temp[key];
                        }
                    }
                }
            }
        }
 
        return object;
    }

A+JYT

19/11/2014, 09h58
SpaceFrog

C'est déja dans la FAQ ...
http://javascript.developpez.com/faq...vig#RecupParam
19/11/2014, 11h11
adrien5555

@sekaijin @SpaceFrog : bonjour, un grand Merci pour votre aide. désolé pour ne pas avoir regardé dans la FAQ.

POurriez vous me dire comment utiliser cette fonctions @sekaikin ou ce script @spacefrog dans les liens svp ?

je ne connais pas la syntaxe, et suis un complet newbie...sorry.

si dans une url du type : www.monsite.fr/?var1=value1&?var2=value2

je cherche à transformer un lien vers
www.monsite.fr/destination.html
en
http://www.monsite.fr/destination.ht...1&?var2=value2

a quoi devrait ressembler le lien :

Code:

<a href="destination.html/?getFromQueryString (var1, value1)">Lien</a>

ou

... ?

avec le script de la FAQ, je vois encore moins mais je sens que c'est facile pour qui a le savoir....
19/11/2014, 13h43
SylvainPV

J'ai l'impression que tu vas dans la mauvaise direction. Si tu as plusieurs variables JavaScript à partager entre tes pages, est-ce qu'il ne faudrait pas faire ta navigation en AJAX ?
19/11/2014, 13h55
adrien5555

@SylvainPV : Merci de soulever la question..

j'ai pensé à JS d'abord parce que j'ai vu un script JS qui se rapprochait de mon besoin, et parce que j'ai déjà inséré des scripts JS (sans forcément en comprendre le contenu)

Là, mon besoin concerne vraiment un mini-site de 4 pages pour faire un CV et une lettre de motivation avec des variables pour personnaliser.

Avec ton script, j'arrive a vraiment bien personnaliser la page sur laquelle atterit le destinataire.
Mais après je ne maitrise pas.

Qu'est ce qui est le plus simple à faire ? modifier les quelques liens de mes pages avec les scripts proposés par sekaijin et SpaceFrog ? ou passer en Ajax ?

Merci
Adrien

intégré à ExtJS depuis la version 4

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
Ext.Object.fromQueryString("foo=1&bar=2"); // returns {foo: '1', bar: '2'}
Ext.Object.fromQueryString("foo=&bar=2"); // returns {foo: null, bar: '2'}
Ext.Object.fromQueryString("some%20price=%24300"); // returns {'some price': '$300'}
Ext.Object.fromQueryString("colors=red&colors=green&colors=blue"); // returns {colors: ['red', 'green', 'blue']}
 
Ext.Object.fromQueryString(
    "username=Jacky&"+
    "dateOfBirth[day]=1&dateOfBirth[month]=2&dateOfBirth[year]=1911&"+
    "hobbies[0]=coding&hobbies[1]=eating&hobbies[2]=sleeping&"+
    "hobbies[3][0]=nested&hobbies[3][1]=stuff", true);
 
// returns
{
    username: 'Jacky',
    dateOfBirth: {
        day: '1',
        month: '2',
        year: '1911'
    },
    hobbies: ['coding', 'eating', 'sleeping', ['nested', 'stuff']]
}

A+JYT

19/11/2014, 17h20
SylvainPV
Il ne va pas utiliser ExtJS pour un mini-site de 4 pages avec un CV... :roll:

Je pense qu'une façon "propre" de gérer des variables JavaScript communes entre des pages est soit de les stocker en session (cookie), soit de ne pas changer concrètement de pages et naviguer en AJAX. Si tu connais un peu AJAX, n'hésite pas à modifier ta navigation: ça te permettra de faire de plus belles transitions à coups d'animations et de fondus, c'est toujours très sympathique pour un site perso (c'est ce que je fais pour le mien)

Pour la façon "sale" mais la plus rapide dans ton cas, tu peux modifier tous les liens de ta page en rajoutant les queryString comme ceci:
Code:

1 2 3 [].forEach.call(document.getElementsByTagName("a"), function(link){ link.search = window.location.search; });
Note que tous les liens de la page seront modifiés, et les queryString existantes écrasées. Si tu ne veux en modifier que quelques-uns, tu peux rajouter une classe particulière aux liens en question.
19/11/2014, 18h11
adrien5555

Sylvain,
bien compris tes propositions intéressantes de passer par un cookie ou ajax, j'ai essayé rapidement la solution sale cependant : ca fonctionne quasiment au poil merci !!!

j'ai du placé le script avant /body pour que ca fonctionne, et il reste bizarrement quelques liens ou ca ne marche pas. je vais fouine.

feedback : sympa l'idée des transitions instantanées en ajax sur ton portfolio, mais chez moi, y avait beaucoup de lag (genre au moins 10 sec) ce qui fait qu'on clique dans tous les sens au bout de 4 sec.

Merci encore !
Adrien

non je ne proposais pas d'utiliser ExtJS
Je le présentais car je trouve la fonction plutôt pas mal
retrouner l'ensemble des varaibles de la queryString sous forme de membre d'un objet et ce de façon récursive et structure.

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
getFromQueryString(
    "username=Jacky&"+                                                                            //simple sting
    "dateOfBirth[day]=1&dateOfBirth[month]=2&dateOfBirth[year]=1911&"+  //objet
    "hobbies[0]=coding&hobbies[1]=eating&hobbies[2]=sleeping&"+            //tableau indicé
    "hobbies[3][0]=nested&hobbies[3][1]=stuff&"+                                     //élément d'un tableau qui est un tableau
    "colors=red&colors=green&colors=blue", true);                                     //tableau sans indice
 
// returns
{
    username: 'Jacky',
    dateOfBirth: {
        day: '1',
        month: '2',
        year: '1911'
    },
    colors: ['red', 'green', 'blue'],
    hobbies: ['coding', 'eating', 'sleeping', ['nested', 'stuff']]
}

Je pense que s'inspirer du principe pour proposer une telle fonction dans la FAQ serais pas mal.
A+JYT

26/11/2014, 13h55
adrien5555

Hello à tous,

@SylvainPV,

Sur cette première page, cela fonctionne parfaitement...

mais j'ai beau chercher, si tu cliques pour aller sur la page CV, les paramètres sont bien présents dans l'URL, mais ne sont reportés sur aucun lien... donc sur la page suivante, il n'y a plus de paramètres d'URL.

Ca te dérangerait d'y jeter un oeil ?...

désolé de pousser un peu :/

Adrien
26/11/2014, 16h38
SylvainPV

Il y a des erreurs JavaScript dans ton code avec les innerHTML, je vois des exceptions en console. L'exécution du bloc courant JavaScript s'arrête lorsque ces exceptions sont remontées.
27/11/2014, 22h19
adrien5555
Merci Sylvain,
ta remarque m'a permis de comprendre ce qui bloquait, bien que je ne maitrise pas vraiment Firebug (j'aimerais bien apprendre d'ailleurs).

Ce qui bloque, c'est quand il y a un a une définition d'un élément dans le script, alors que le dit élément n'existe pas dans le HTML :
Code:

1 2 var element = document.getElementById("societe"); element.innerHTML = getURLParameter("soc");
Si pas de bloc avec un id=societe --> le script bloquait

Comme je n'avais pas besoin de TOUS les éléments de personnalisation sur TOUTES les pages, voilà la source de l'erreur.

Pour supprimer l'erreur, ce n'est pas très propre, mais, j'ai ajouté tous les éléments HTML correspondant aux variables sur Toutes les pages.... avec un display:none :)

Merci encore pour ton aide ! :D
28/11/2014, 23h14
SylvainPV
Citation:

Envoyé par adrien5555

Pour supprimer l'erreur, ce n'est pas très propre, mais, j'ai ajouté tous les éléments HTML correspondant aux variables sur Toutes les pages.... avec un display:none :)

En effet c'est tout sauf propre ! Un simple if aurait suffit :
Code:

1 2 3 4 var element = document.getElementById("societe"); if(element){ element.innerHTML = getURLParameter("soc"); }