Extraction url JavaScript

Version imprimable

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:

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:

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>  <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

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:

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>

adapté de MDN:

Code:

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

22/08/2019, 12h41
nicoco78440

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 ?

Code:

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);

22/08/2019, 13h27
nicoco78440

Je dois remplacer l'ensemble de mon code JS par cela ?
j'ai beaucoup de mal désolé
22/08/2019, 13h31
javatwister

Ben en fait oui...

Coollll :zoubi:

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:

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>

Code:

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));

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

rappel

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
 
<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 ??

22/08/2019, 16h28
javatwister

Citation:

Envoyé par nicoco78440

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;
22/08/2019, 17h01
nicoco78440

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

Bonjour,

bandeau.html :

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
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> :

Texte défilant avec départ à droite (démo)

22/08/2019, 17h26
nicoco78440

Tu es tropppp fortttt, merci enormement
22/08/2019, 17h54
nicoco78440

est-il possible de mettre ce bandeau en bas de page ?
22/08/2019, 18h06
Invité

Oui, tu le mets où tu veux.
23/08/2019, 16h17
nicoco78440

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