Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

  1. #1
    Candidat au Club
    Homme Profil pro
    Technicien Help Desk
    Inscrit en
    août 2019
    Messages
    12
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Yvelines (Île de France)

    Informations professionnelles :
    Activité : Technicien Help Desk

    Informations forums :
    Inscription : août 2019
    Messages : 12
    Points : 4
    Points
    4

    Par défaut Extraction url JavaScript

    Bonjour à tous,

    Je souhaiterai extraire des informations d'une URL et les afficher dans un bandeau déroulant HTML, j'essaye d'expliquer au plus clair ce que je veux.

    J'ai créé une page HTML qui demande à l'utilisateur 4 informations (site,impact,probleme,temps de résolution), c'est dernières apparaissent sur l'uRL bandeau.html :

    Code HTML : Sélectionner tout - Visualiser dans une fenêtre à part
    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
    \\Demande utilisateur information
    <html>
    <form action="bandeau.html" method="get">
     
    <Center>
     Site impacté :
     
    <SELECT name="site" size="1" width=500px/>
    <OPTION>Tous
    <OPTION>Paris
    <OPTION>Marseille
    <OPTION>Bordeaux
    <OPTION>Montpellier
    </SELECT>
     
     
    			<p>	
    		Impact : 
     
    <SELECT name="impact" size="1"
    width : 500px />
    <OPTION>Faible
    <OPTION>Moyenne
    <OPTION>Forme
    </SELECT>
    </p>
     
     
    <p> Description du probleme : 
    <input type ="text" name="probleme" />
    </p>
     
    <p> Temps résolution :
    <input type="text" name="temps" />
     
    <input type="submit" value="Valider" />
    </p>
    </Center>
    </form>
    </body>
    </html>

    Je souhaiterais extraire ces informations pour les places dans un bandeaux déroulant :

    Code HTML : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    <head>
    	<title>Incident en cours</title>
    </head>
    <body>
    <iframe src="http://192.168.100.8/bandeau#/" style="height:90%;width:100%;"></iframe><br>
    <center>
     
    <!--texte caché -->
    <marquee  direction="right" width="100%" height="50" loop="-1"  bgcolor="red" valign="middle" ><b><br> </b></marquee><br>
     
    <br>
    </body>
    ?>
    </html>


    Merci d'avance pour votre aide

  2. #2
    Candidat au Club
    Homme Profil pro
    Technicien Help Desk
    Inscrit en
    août 2019
    Messages
    12
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Yvelines (Île de France)

    Informations professionnelles :
    Activité : Technicien Help Desk

    Informations forums :
    Inscription : août 2019
    Messages : 12
    Points : 4
    Points
    4

    Par défaut

    J'arrive à "extraire" la donnée site, mais je n'arrive qu'à l'afficher en alerte au lieu de la mettre dans mon bandeau, et je n'arrive pas à faire la même chose pour les autres (impact,probleme,temps) :

    Code HTML : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    <html>
    <script language="JavaScript">
    function getParamByName(site, url,) {
        if (!url) url = window.location.href;
        site = site.replace(/[\[\]]/g, "\\$&");
        var regex = new RegExp("[?&]" + site + "(=([^&#]*)|&|#|$)"),
            results = regex.exec(url);
        if (!results) return null;
        if (!results[2]) return '';
        return decodeURIComponent(results[2].replace(/\+/g, " "));
    }
    var site = getParamByName('site');
     
    alert(site);
     
    </script>
     
    </html>

  3. #3
    Membre expert
    Avatar de javatwister
    Homme Profil pro
    danseur
    Inscrit en
    août 2003
    Messages
    2 827
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Calvados (Basse Normandie)

    Informations professionnelles :
    Activité : danseur

    Informations forums :
    Inscription : août 2003
    Messages : 2 827
    Points : 3 630
    Points
    3 630

    Par défaut

    adapté de MDN:

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    var tab = {};
    var url = window.location.href.search;
    for (var param, rang = 0, lg = url.substr(1).split("&"); rang < lg.length; rang++) {
        param = lg[rang].split("=");
        tab[unescape(param[0])] = param.length > 1 ? unescape(param[1]) : "";
     }
    console.log(Object.values(tab));// tes valeurs

  4. #4
    Candidat au Club
    Homme Profil pro
    Technicien Help Desk
    Inscrit en
    août 2019
    Messages
    12
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Yvelines (Île de France)

    Informations professionnelles :
    Activité : Technicien Help Desk

    Informations forums :
    Inscription : août 2019
    Messages : 12
    Points : 4
    Points
    4

    Par défaut

    Bonjour, merci javatwister pour ton retour.

    Par contre je ne vois pas du tout quoi remplacer dans mon code avec ce que tu viens de m'envoyer... as-tu la possibilité de l'adapter à mon code actuel ?

  5. #5
    Membre expert
    Avatar de javatwister
    Homme Profil pro
    danseur
    Inscrit en
    août 2003
    Messages
    2 827
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Calvados (Basse Normandie)

    Informations professionnelles :
    Activité : danseur

    Informations forums :
    Inscription : août 2003
    Messages : 2 827
    Points : 3 630
    Points
    3 630

    Par défaut

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    // Là tu récupères uniquement les valeurs saisies, quel que soit le nom des paramètres;
    // si tu veux, tu peux associer le nom des champs, c'est facile à modifier;
    function getParamByName(url){
    var tab = {};
    for (var param, rang = 0, lg = url.substring(1).split("&"); rang < lg.length; rang++) {
        param = lg[rang].split("=");
        tab[unescape(param[0])] = param.length > 1 ? unescape(param[1]) : "";
     }
    console.log(Object.values(tab))
    }
     
    // appel de ta fonction de récupération des valeurs saisies
    getParamByName(window.location.href.search);

  6. #6
    Candidat au Club
    Homme Profil pro
    Technicien Help Desk
    Inscrit en
    août 2019
    Messages
    12
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Yvelines (Île de France)

    Informations professionnelles :
    Activité : Technicien Help Desk

    Informations forums :
    Inscription : août 2019
    Messages : 12
    Points : 4
    Points
    4

    Par défaut

    Je dois remplacer l'ensemble de mon code JS par cela ?
    j'ai beaucoup de mal désolé

  7. #7
    Membre expert
    Avatar de javatwister
    Homme Profil pro
    danseur
    Inscrit en
    août 2003
    Messages
    2 827
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Calvados (Basse Normandie)

    Informations professionnelles :
    Activité : danseur

    Informations forums :
    Inscription : août 2003
    Messages : 2 827
    Points : 3 630
    Points
    3 630

    Par défaut

    Ben en fait oui...

  8. #8
    Candidat au Club
    Homme Profil pro
    Technicien Help Desk
    Inscrit en
    août 2019
    Messages
    12
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Yvelines (Île de France)

    Informations professionnelles :
    Activité : Technicien Help Desk

    Informations forums :
    Inscription : août 2019
    Messages : 12
    Points : 4
    Points
    4

    Par défaut

    Coollll

    Mais ton code permets de recuperer les informations demandées dans la page précédente ?
    Je peux les afficher comment sur une page HTML ?

    Désolé mais je ne sais pas du tout et ca fait des jours que je cherche et là faut que je recommence snifff, je n'arrive que à faire des alertes JS :

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    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
     
     
    <html>
    <script language="JavaScript">
    function getParamByimpact(impact, url) {
        if (!url) url = window.location.href;
        impact = impact.replace(/[\[\]]/g, "\\$&");
        var regex = new RegExp("[?&]" + impact + "(=([^&#]*)|&|#|$)"),
            results = regex.exec(url);
        if (!results) return null;
        if (!results[2]) return '';
        return decodeURIComponent(results[2].replace(/\+/g, " "));
    }
    var impact = getParamByimpact('impact');
     
     
     
    function getParamBysite(site, url) {
        if (!url) url = window.location.href;
        site = site.replace(/[\[\]]/g, "\\$&");
        var regex = new RegExp("[?&]" + site + "(=([^&#]*)|&|#|$)"),
            results = regex.exec(url);
        if (!results) return null;
        if (!results[2]) return '';
        return decodeURIComponent(results[2].replace(/\+/g, " "));
    }
    var site = getParamBysite('site');
     
     
     
    function getParamByprobleme(probleme, url) {
        if (!url) url = window.location.href;
        probleme = probleme.replace(/[\[\]]/g, "\\$&");
        var regex = new RegExp("[?&]" + probleme + "(=([^&#]*)|&|#|$)"),
            results = regex.exec(url);
        if (!results) return null;
        if (!results[2]) return '';
        return decodeURIComponent(results[2].replace(/\+/g, " "));
    }
    var probleme = getParamByprobleme('probleme');
     
     
     
    function getParamBytemps(temps, url) {
        if (!url) url = window.location.href;
        temps = temps.replace(/[\[\]]/g, "\\$&");
        var regex = new RegExp("[?&]" + temps + "(=([^&#]*)|&|#|$)"),
            results = regex.exec(url);
        if (!results) return null;
        if (!results[2]) return '';
        return decodeURIComponent(results[2].replace(/\+/g, " "));
    }
    var temps = getParamBytemps('temps');
     
    alert(temps);
     
    </script>
     
    </html>

  9. #9
    Membre expert
    Avatar de javatwister
    Homme Profil pro
    danseur
    Inscrit en
    août 2003
    Messages
    2 827
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Calvados (Basse Normandie)

    Informations professionnelles :
    Activité : danseur

    Informations forums :
    Inscription : août 2003
    Messages : 2 827
    Points : 3 630
    Points
    3 630

    Par défaut

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    // fonction qui récupère les couples paramètre / valeur dans l'url
    function getParamByName(chaine, url){
    // tu crées un objet vide "tab"...
    var tab = {};
    for (var param, rang = 0, lg = url.substring(1).split("&"); rang < lg.length; rang++) {
        param = lg[rang].split("=");
        // ... qui va contenir chaque couple paramètre / valeur
    	tab[unescape(param[0])] = param.length > 1 ? unescape(param[1]) : "";
     }
    // tu transformes l'objet "tab" en chaîne
    for (val in tab){
    	chaine+=val+":"+tab[val]+" ";
     
    }
    // "chaine" contient tous les couples paramètre / valeur
    // Tu en fais ce que tu veux... mis à part évidemment une balise "marquee"...
    return chaine;
    }
    // appel de ta fonction dans une "alert" qui te confirme que tu as bien tous les résultats
    alert(getParamByName("",window.location.href.search));

  10. #10
    Candidat au Club
    Homme Profil pro
    Technicien Help Desk
    Inscrit en
    août 2019
    Messages
    12
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Yvelines (Île de France)

    Informations professionnelles :
    Activité : Technicien Help Desk

    Informations forums :
    Inscription : août 2019
    Messages : 12
    Points : 4
    Points
    4

    Par défaut

    ok donc je ne peux rien faire avec ce que je récupère dans ma page donnee.html :

    rappel
    Code HTML : Sélectionner tout - Visualiser dans une fenêtre à part
    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
     
    <html>
    <form action="bandeau.html" method="get">
     
    <Center>
     Site impacté :
     
    <SELECT name="site" size="1" width=500px/>
    <OPTION>Tous
    <OPTION>Paris
    <OPTION>Marseille
    <OPTION>Bordeaux
    <OPTION>Montpellier
    </SELECT>
     
     
    			<p>	
    		Impact : 
     
    <SELECT name="impact" size="1"
    width : 500px />
    <OPTION>Faible
    <OPTION>Moyenne
    <OPTION>Forte
    </SELECT>
    </p>
     
     
    <p> Description du probleme : 
    <input type ="text" name="probleme" />
    </p>
     
    <p> Temps résolution :
    <input type="text" name="temps" />
     
    <input type="submit" value="Valider" />
    </p>
    </Center>
    </form>
    </body>
    </html>


    car je souhaite que récupérer les données pour les mettre dans un bandeau défilant, il y a que le php ??

  11. #11
    Membre expert
    Avatar de javatwister
    Homme Profil pro
    danseur
    Inscrit en
    août 2003
    Messages
    2 827
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Calvados (Basse Normandie)

    Informations professionnelles :
    Activité : danseur

    Informations forums :
    Inscription : août 2003
    Messages : 2 827
    Points : 3 630
    Points
    3 630

    Par défaut

    Citation Envoyé par nicoco78440 Voir le message
    je ne peux rien faire avec ce que je recupère dans ma page donnee.html
    Je pense surtout que ton vrai problème est:

    Comment donner un contenu à une balise HTML avec javascript...

    Et là, je te laisse chercher;

  12. #12
    Candidat au Club
    Homme Profil pro
    Technicien Help Desk
    Inscrit en
    août 2019
    Messages
    12
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Yvelines (Île de France)

    Informations professionnelles :
    Activité : Technicien Help Desk

    Informations forums :
    Inscription : août 2019
    Messages : 12
    Points : 4
    Points
    4

    Par défaut

    c est exactement ca, mais est ce que cela est possible... ca m'evite de chercher pour rien

  13. #13
    Rédacteur/Modérateur
    Avatar de jreaux62
    Homme Profil pro
    Webdesigner
    Inscrit en
    août 2008
    Messages
    15 287
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 52
    Localisation : France, Pas de Calais (Nord Pas de Calais)

    Informations professionnelles :
    Activité : Webdesigner
    Secteur : Arts - Culture

    Informations forums :
    Inscription : août 2008
    Messages : 15 287
    Points : 31 220
    Points
    31 220

    Par défaut

    Bonjour,

    bandeau.html :

    Code HTML : Sélectionner tout - Visualiser dans une fenêtre à part
    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
    83
    84
    85
    86
    87
    88
    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8" />
    	<title></title>
    <script>
    'use strict';
    // récupère un paramètre dans l'URL
    function $_GET(param) {
            var vars = {};
            var url = decodeURIComponent( window.location.href.replace(/\+/g, '%20') );
            console.log( url );
            url.replace( location.hash, '' ).replace( 
                    /[?&]+([^=&]+)=?([^&]*)?/gi, // regexp
                    function( m, key, value ) { // callback
                            vars[key] = value !== undefined ? value : '';
                    }
            );
            if ( param ) {
                    return vars[param] ? vars[param] : null;        
            }
            return vars;
    }
    // texte défilant
    function texte_defilant() {
            var site = $_GET( 'site' );
            var impact = $_GET( 'impact' );
            var probleme = $_GET( 'probleme' );
            var temps = $_GET( 'temps' );
            var texteHTML = '<em>site : </em>'+site+'<br/><em>impact : </em>'+impact+'<br/><em>problème : </em>'+probleme+'<br/><em>temps : </em>'+temps;
            document.getElementById('texte_defilant').innerHTML = texteHTML;
    }
    // appel de la fonction sur onload
    window.onload = function(){
            texte_defilant();
    }
    </script>
    <style>
    .marquee-rtl {
      overflow: hidden; /* important */
      width:50%; /* A ADAPTER */
      max-width:600px; /* A ADAPTER */
      margin: 2em auto;
      border: 5px solid #F0F0FF;
    }
    .marquee-rtl > div {
      display: inline-block; /* important */
      white-space: nowrap; /* important */
      animation: defilement-rtl 15s infinite linear; /* défilement */
      cursor: pointer;
      padding: 10px 2em 10px 100%;
      font-size: 120%;
      font-family:Arial,sans-serif;
    }
    .marquee-rtl:hover > div {
      animation-play-state: paused; /* met en pause le défilement */
    }
    @keyframes defilement-rtl {
      0% {
        -webkit-transform: translate(0);
        transform: translate(0);
      }
      100% {
        -webkit-transform: translate(-100%);
        transform: translate(-100%);
      }
    }
    /* texte sur plusieurs lignes automatiquement */
    .marquee-multi-lignes > div { 
      width:90%;
      white-space: normal; /* important */
    }
    /* DECO */
    .marquee-rtl > div > em {
            display:inline-block;
            width:100px;
            font-size:75%;
            color:#666;
    }
    </style>
    </head>
    <body>
    <div class="marquee-rtl marquee-multi-lignes">
    	<div id="texte_defilant"></div>
    </div>
     
    </body>
    </html>

    Texte défilant SANS <marquee> :

    "Si tu suis le chemin qui s'appelle « plus tard », tu arriveras à la place qui s'appelle « jamais »."
    François Camille Prévot (1910-1996), instituteur puis Directeur d'école et... mon grand-père.
    "Pose ta question, tu seras idiot une seconde. Ne la pose pas, tu seras idiot toute ta vie."
    Albert Einstein (1879-1955).
    Mes tutos DVP
    Gestion-Affichage de Nouvelles
    Affichage en tableau HTML
    Fonctions de redimensionnement d'images

  14. #14
    Candidat au Club
    Homme Profil pro
    Technicien Help Desk
    Inscrit en
    août 2019
    Messages
    12
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Yvelines (Île de France)

    Informations professionnelles :
    Activité : Technicien Help Desk

    Informations forums :
    Inscription : août 2019
    Messages : 12
    Points : 4
    Points
    4

    Par défaut

    Tu es tropppp fortttt, merci enormement

  15. #15
    Candidat au Club
    Homme Profil pro
    Technicien Help Desk
    Inscrit en
    août 2019
    Messages
    12
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Yvelines (Île de France)

    Informations professionnelles :
    Activité : Technicien Help Desk

    Informations forums :
    Inscription : août 2019
    Messages : 12
    Points : 4
    Points
    4

    Par défaut

    est-il possible de mettre ce bandeau en bas de page ?

  16. #16
    Rédacteur/Modérateur
    Avatar de jreaux62
    Homme Profil pro
    Webdesigner
    Inscrit en
    août 2008
    Messages
    15 287
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 52
    Localisation : France, Pas de Calais (Nord Pas de Calais)

    Informations professionnelles :
    Activité : Webdesigner
    Secteur : Arts - Culture

    Informations forums :
    Inscription : août 2008
    Messages : 15 287
    Points : 31 220
    Points
    31 220

    Par défaut

    Oui, tu le mets où tu veux.
    "Si tu suis le chemin qui s'appelle « plus tard », tu arriveras à la place qui s'appelle « jamais »."
    François Camille Prévot (1910-1996), instituteur puis Directeur d'école et... mon grand-père.
    "Pose ta question, tu seras idiot une seconde. Ne la pose pas, tu seras idiot toute ta vie."
    Albert Einstein (1879-1955).
    Mes tutos DVP
    Gestion-Affichage de Nouvelles
    Affichage en tableau HTML
    Fonctions de redimensionnement d'images

  17. #17
    Candidat au Club
    Homme Profil pro
    Technicien Help Desk
    Inscrit en
    août 2019
    Messages
    12
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Yvelines (Île de France)

    Informations professionnelles :
    Activité : Technicien Help Desk

    Informations forums :
    Inscription : août 2019
    Messages : 12
    Points : 4
    Points
    4

    Par défaut

    Par contre je vois en bas un ascenseur, est-il possible de le retirer ?

Discussions similaires

  1. Probleme de regex - extraction url avec tiret
    Par joboy84 dans le forum Langage
    Réponses: 1
    Dernier message: 01/07/2008, 20h37
  2. Raccourci URL Javascript
    Par twingo321 dans le forum Général JavaScript
    Réponses: 1
    Dernier message: 27/07/2007, 16h03
  3. Pb Regex extraction URL
    Par fly06 dans le forum Regex
    Réponses: 3
    Dernier message: 17/09/2006, 21h58
  4. erreur extraction url à partir de mysql
    Par rozow dans le forum SQL Procédural
    Réponses: 2
    Dernier message: 21/03/2006, 10h45

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo