Discussion :

[boteha]

Bonjour,

Le scan de Mozilla recommande de renseigner le header Content Security Policy

Selon les paramètres les plus sécurisés les javascript inline ne peuvent plus être activés.

Pourquoi ne pas essayer de se conformer à ce que demande Mozilla.

Mon problème est que mon code HTML est constellé de petites phrase magiques générées de façon dynamique pour par exemple pouvoir ouvrir des images en pop-up :

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
<img src="im/pr/2071G.jpg" width="110" height="94" onclick="window.open('popup.php?nom=2071G.jpg','','scrollbars=yes,resizable=yes,width=420,height=445');" alt="" />
 
<img src="im/pr/585G.jpg" width="110" height="85" onclick="window.open('popup.php?nom=585G.jpg','','scrollbars=yes,resizable=yes,width=420,height=414');" alt="" />

Autre petite phrase, non dynamique celle-la :

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

<input type="text" name="txlibre" value="(texte libre)" onfocus="if (this.value=='(texte libre)') this.value='';"   />

Je ne vois pas du tout me débarrasser de ces scripts inline tout en gardant mes pop-up et remplacements de texte actifs.

Merci de votre aide.

[Doksuri]

il faut que tu passes des ids (uniques) a tes elements pour pouvoir les retrouver en JS
et que tu utilises les eventListener developer.mozilla.org/fr/docs/Web/API/EventTarget/addEventListener
par exemple :
<img id="img1" src="im/pr/2071G.jpg" width="110" height="94" alt="" />

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
document.getElementById('img1').addEventListerner('click', () => {
    window.open('popup.php?nom=2071G.jpg','','scrollbars=yes,resizable=yes,width=420,height=445');
});

[boteha]

Bonjour Doksuri,

Merci de ta réponse.

Toutefois ce code est dynamique, il me semble impossible ou trop lourd de créer à la volée un fichier javascript à charger.

Par contre je peux écrire à la volée ce code dans le HEAD de la page html dans une balise <script type="javascript">.

Mozilla considère-t-il encore ce code comme un script inline ?
Je vais essayer dès que j'ai le temps

[boteha]

Bonjour,

J'espère que ce codepen illustre mon problème.

Je peux avoir 200 images sur une page, chacune pouvant s'ouvrir dans un pop-up dont la hauteur est déterminée par la hauteur de l'image.

Actuellement j'ai donc 200 phrases magiques du type :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

onclick="window.open('popup.php?nom=1261G.jpg','','scrollbars=yes,resizable=yes,width=420,height=427');"

Pour sortir ces phrases du code html, mon idée est générer un id dont les 3 derniers chiffres sont la hauteur du pop-up.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

img id="A1261G427"

Mon idée est d'avoir une petite fonction javascript qui cible simplement toutes les images dans div.list (div.list img serait le sélecteur en css)

Ensuite récupère l'id, en extrait les 3 derniers caractères qui deviennent la hauteur du pop-up.

J'ose croire que c'est possible et même assez facile mais cela dépasse mon niveau en javascript.

Merci de votre aide.

[javatwister]

Je peux avoir 200 images sur une page, chacune pouvant s'ouvrir dans un pop-up dont la hauteur est déterminée par la hauteur de l'image.

Bonjour,

Oui, on a compris que tu voulais une galerie d'images...
Mais si l'image du popup a la même hauteur que l'image sur laquelle tu cliques, ça n'a pas d'intérêt.
Sur la page de base, tu as des miniatures et en cliquant dessus, tu vois l'image en taille réelle dans un popup. C'est ça?

[boteha]

Bonjour javatwister,

C'est ça.

D'une vignette tu ouvres dans un pop-up à la taille réelle de l'image, largeur fixe de 400 px et hauteur variable mais renseigné par le script PHP en amont.

Ensuite il suffit de cliquer sur le logo Agrandir du pop-up pour passe ton image en plein écran.

Tout cela marche très bien et mon problème est d'avoir la fonction javascript dans un script externe et non inline.

Le codepen présente bien le problème, j'espère.

[Doksuri]

il faut dans ce cas que tu passes par la delegation d'evenement

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
<div id="parent">
 
<div class="list"><img id="A1261G427" src="im/pr/1261G.jpg" width="110" height="89" alt="click-image" /><ul>
<li class="tit"><input type="checkbox" name="fich[]" value="1261" /><a class="cat" href="b.php?a=A9L3et-cA9-aut-bma&amp;c=Voi&amp;h=1261">Cordon RJ45 Cat6a, UTP, surmoul&eacute;</a></li>
<li class="des">Ce c&acirc;ble droit de cat&eacute;gorie 6a est de norme U&nbsp;/ UTP (UTP), c'est-&agrave;-dire non blind&eacute;.</li>
<li class="comp">Value |<i> 70 versions de 0,5 &agrave; 20&nbsp;m</i> | de 2,40 &agrave; 24,86&nbsp;&euro;&nbsp;TTC</li>
</ul></div>
 
<div class="list"><img id="A659G496" src="im/pr/659G.jpg" width="110" height="108" alt="click-image" /><ul>
<li class="tit"><input type="checkbox" name="fich[]" value="659" /><a class="cat" href="b.php?a=A9L3et-cA9-aut-bma&amp;c=Voi&amp;h=659">Cordon RJ45 Cat6a, UTP, surmoul&eacute;, avec d&eacute;vidoir</a></li>
<li class="des">Ce c&acirc;ble droit de cat&eacute;gorie 6a est de norme U&nbsp;/ UTP (UTP), c'est-&agrave;-dire non blind&eacute;. Il est combin&eacute; &agrave; une sorte de d&eacute;vidoir (DeskPatch) permettant de bien ranger la longueur de c&acirc;ble en surplus.</li>
<li class="comp">PatchSee |<i> 5,00&nbsp;m </i>|<i> 4 versions | Prix HT : 4,74&nbsp;&euro;</i> | 5,69&nbsp;&euro;&nbsp;TTC</li>
</ul></div>
 
<div class="list"><img id="A740G395" src="im/pr/740G.jpg" width="110" height="80" alt="click-image" /><ul>
<li class="tit"><input type="checkbox" name="fich[]" value="740" /><a class="cat" href="b.php?a=A9L3et-cA9-aut-bma&amp;c=Voi&amp;h=740">Cordon RJ45 Cat6a, UTP, surmoul&eacute;, sans halog&egrave;ne, Component Level</a></li>
<li class="des">Ce c&acirc;ble droit de Cat&eacute;gorie 6 est &agrave; gaine LSZH (Low Smoke Zero Halog&egrave;ne). Il est de norme U&nbsp;/ UTP (UTP), c'est-&agrave;-dire non blind&eacute;. Fiche Snagless c'est-&agrave;-dire que le clip de fixation est prot&eacute;g&eacute; par une languette souple.</li>
<li class="comp">Roline |<i> 124 versions de 0,3 &agrave; 20&nbsp;m</i> | de 4,21 &agrave; 25,81&nbsp;&euro;&nbsp;TTC</li>
</ul></div>
 
</div>

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
document.getElementById('parent').addEventListener('click', ({target}) => {
  let idImg = target.src.split('/');
  idImg = idImg[idImg.length-1];
    window.open(`popup.php?nom=${idImg}`,'','scrollbars=yes,resizable=yes,width=420,height=427');
});

c'est un truc du genre que tu veux ?

[boteha]

Bonjour,

Merci de ton suivi.

Ce que tu proposes est-il pas exactement ce que je veux (et j'espère que ce que je veux est possible) ?

1) Il faut cibler les images uniquement.

Dans div class="list" il y a deux éléments cliquables : l'image et un input.

2) Au click le script doit récupérer l'ID de l'image, les 3 dernier chiffres étant la hauteur voulue pour le pop-up.

img id="A1261G427" = hauteur 427

img id="A659G496" = hauteur 496

Je vois que tu récupère déjà l'id, ce deuxième point est sans doute très facile.

La variable pour le popup.php = On enlève le premier caractère et on va jusqu'à G inclus : 1261G ou 659G dans ces deux exemples.
La variable pour la hauteur du pop-up = les 3 derniers chiffres : 427 ou 496 dans ces deux exemples.

[Doksuri]

effectiviment, je n'avais pas restreint aux images

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
document.getElementById('parent').addEventListener('click', ({target}) => {
	if(target.nodeName === 'IMG') {
  	const idImg = target.id.split('G');
    const id = idImg[0].substr(1);
    const height = idImg[1];
    window.open(`popup.php?nom=${id}G.jpg`,'',`scrollbars=yes,resizable=yes,width=420,height=${height}`);
  }
});

[javatwister]

Oui!
Ou même sans délégation:

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
document.querySelectorAll("#parent img").forEach(im=>{
	im.addEventListener("click",e=>{
		let uri = e.target.src.split("/");
		uri=uri[uri.length-1];
		let h=e.target.id.substring(e.target.id.indexOf("G")+1))
		window.open(`${uri}`,'',`scrollbars=yes,resizable=yes,width=420,height=${h}`);
	})
})

[Doksuri]

Oui!
Ou même sans délégation

s'il veut ajouter des images en js par la suite, c'est preferable avec la delegation
j'imagine qu'il ne va pas charger les 200 images d'un coup il va faire un genre de lazy load hein

[boteha]

Bonjour,

MERCI.

Je teste pendant le week-end.

Je vous tiens informés.

[boteha]

Bonjour,

Dans le codepen le code de Doksuri marche très bien.

Javatwister, ton code présente-t-il un avantage, il me semble plus complexe ?

[javatwister]

Ben non, la différence serait invisible dans ton code;

[boteha]

Bonjour,

Alors je vais intégrer le code de Doksuri sur mon site de test, à mon avis dans une semaine.

Je publierai un lien quand ce sera fait, vous pourrez apprécier ces images en pop-up.

Encore merci.

[javatwister]

Pour la petite histoire, le code de Doksuri ne cible pas les images, uniquement ton div conteneur ("parent"); et quand tu cliques sur l'ensemble de ce conteneur, si ta souris se trouve sur une image, la cible devient l'image en question.
Dans mon code, je cible directement les images.

Comme dit Doksuri, avec son code, tu peux décider d'intégrer une image dynamiquement (new Image() ou document.createElement("img")), ou de la recevoir par requête serveur: elle bénéficiera automatiquement du script d'agrandissement.
Alors que mon script est fait pour une liste "non modifiable à la volée" puisque la liste des images donnée par document.querySelectorAll("#parent img") est définie au chargement de la page.

[boteha]

En l’occurrence les images (vignettes) sont chargées par requête serveur.
Il peut y avoir sur une page de 1 à plus de 200 vignettes.
Avec les navigateurs modernes le chargement est rapide, d'autant que les dimensions de chaque vignette sont dans le code HTML
Un peu plus lent sur les mobiles.

[javatwister]

ok ok, donc peu importe, tu choisis ce que tu veux;

[boteha]

Bonjour,

Essai du code de Javatwister dans le codepen, nickel.

Petite faute de frappe :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
let h=e.target.id.substring(e.target.id.indexOf("G")+1))
 
// Il faut enlever le dernier ) ce qui est fait dans le codepen

Pour la balance entre vos deux codes.
1) Le plus rapide ?
2) Compatibilité IE et vieux navigateurs ?

[javatwister]

Mise sur la version de Doksuri, avec juste cet aménagement:

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
document.getElementById('parent').addEventListener('click', function(e){
	if(e.target.nodeName === 'IMG') {
  	const idImg = e.target.id.split('G');
    const id = idImg[0].substr(1);
    const height = idImg[1];
    window.open(`popup.php?nom=${id}G.jpg`,'',`scrollbars=yes,resizable=yes,width=420,height=${height}`);
  }
});