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. ###raw>post.musername###
    Candidat au Club
    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
      0  0

  2. ###raw>post.musername###
    Candidat au Club
    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>
      0  0

  3. #3
    Expert confirmé
    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
    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é
    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
    Je dois remplacer l'ensemble de mon code JS par cela ?
    j'ai beaucoup de mal désolé

  7. #7
    Expert confirmé
    Ben en fait oui...

  8. ###raw>post.musername###
    Candidat au Club
    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>
      0  0

  9. #9
    Expert confirmé
    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
    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é
    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
    c est exactement ca, mais est ce que cela est possible... ca m'evite de chercher pour rien

  13. #13
    Invité
    Invité(e)
    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> :


  14. #14
    Candidat au Club
    Tu es tropppp fortttt, merci enormement

  15. #15
    Candidat au Club
    est-il possible de mettre ce bandeau en bas de page ?

  16. #16
    Invité
    Invité(e)
    Oui, tu le mets où tu veux.

  17. #17
    Candidat au Club
    Par contre je vois en bas un ascenseur, est-il possible de le retirer ?