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