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 :

Supprimer le JavaScript inline


Sujet :

JavaScript

  1. #1
    Membre régulier
    Supprimer le JavaScript inline
    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.

  2. #2
    Membre expert
    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');
    });
    La forme des pyramides prouve que l'Homme a toujours tendance a en faire de moins en moins.

    Venez discuter sur le Chat de Développez !

  3. #3
    Membre régulier
    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

  4. #4
    Membre régulier
    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.

  5. #5
    Expert confirmé
    Citation Envoyé par boteha Voir le message
    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?

  6. #6
    Membre régulier
    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.

  7. #7
    Membre expert
    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 ?
    La forme des pyramides prouve que l'Homme a toujours tendance a en faire de moins en moins.

    Venez discuter sur le Chat de Développez !

  8. #8
    Membre régulier
    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.

  9. #9
    Membre expert
    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}`);
      }
    });
    La forme des pyramides prouve que l'Homme a toujours tendance a en faire de moins en moins.

    Venez discuter sur le Chat de Développez !

  10. #10
    Expert confirmé
    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}`);
    	})
    })

  11. #11
    Membre expert
    Citation Envoyé par javatwister Voir le message
    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
    La forme des pyramides prouve que l'Homme a toujours tendance a en faire de moins en moins.

    Venez discuter sur le Chat de Développez !

  12. #12
    Membre régulier
    Bonjour,

    MERCI.

    Je teste pendant le week-end.

    Je vous tiens informés.

  13. #13
    Membre régulier
    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 ?

  14. #14
    Expert confirmé
    Ben non, la différence serait invisible dans ton code;

  15. #15
    Membre régulier
    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.

  16. #16
    Expert confirmé
    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.

  17. #17
    Membre régulier
    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.

  18. #18
    Expert confirmé
    ok ok, donc peu importe, tu choisis ce que tu veux;

  19. #19
    Membre régulier
    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 ?

  20. #20
    Expert confirmé
    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}`);
      }
    });