IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
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

JavaScript Discussion :

Extraction url JavaScript


Sujet :

JavaScript

  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
    Expert confirmé
    Avatar de javatwister
    Homme Profil pro
    danseur
    Inscrit en
    Août 2003
    Messages
    3 681
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Calvados (Basse Normandie)

    Informations professionnelles :
    Activité : danseur

    Informations forums :
    Inscription : Août 2003
    Messages : 3 681
    Points : 5 221
    Points
    5 221
    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
    Expert confirmé
    Avatar de javatwister
    Homme Profil pro
    danseur
    Inscrit en
    Août 2003
    Messages
    3 681
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Calvados (Basse Normandie)

    Informations professionnelles :
    Activité : danseur

    Informations forums :
    Inscription : Août 2003
    Messages : 3 681
    Points : 5 221
    Points
    5 221
    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
    Expert confirmé
    Avatar de javatwister
    Homme Profil pro
    danseur
    Inscrit en
    Août 2003
    Messages
    3 681
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Calvados (Basse Normandie)

    Informations professionnelles :
    Activité : danseur

    Informations forums :
    Inscription : Août 2003
    Messages : 3 681
    Points : 5 221
    Points
    5 221
    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
    Expert confirmé
    Avatar de javatwister
    Homme Profil pro
    danseur
    Inscrit en
    Août 2003
    Messages
    3 681
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Calvados (Basse Normandie)

    Informations professionnelles :
    Activité : danseur

    Informations forums :
    Inscription : Août 2003
    Messages : 3 681
    Points : 5 221
    Points
    5 221
    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
    Expert confirmé
    Avatar de javatwister
    Homme Profil pro
    danseur
    Inscrit en
    Août 2003
    Messages
    3 681
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Calvados (Basse Normandie)

    Informations professionnelles :
    Activité : danseur

    Informations forums :
    Inscription : Août 2003
    Messages : 3 681
    Points : 5 221
    Points
    5 221
    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
    Invité
    Invité(e)
    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> :

    Dernière modification par ProgElecT ; 22/08/2019 à 19h15.

  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
    Invité
    Invité(e)
    Par défaut
    Oui, tu le mets où tu veux.

  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, 21h37
  2. Raccourci URL Javascript
    Par twingo321 dans le forum Général JavaScript
    Réponses: 1
    Dernier message: 27/07/2007, 17h03
  3. [RegEx] Pb Regex extraction URL
    Par fly06 dans le forum Langage
    Réponses: 3
    Dernier message: 17/09/2006, 22h58
  4. erreur extraction url à partir de mysql
    Par rozow dans le forum SQL Procédural
    Réponses: 2
    Dernier message: 21/03/2006, 11h45

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