alternative à document.write()

alternative à document.write() - Javascript/Node.js - Programmation

Marsh Posté le 27-06-2019 à 14:27:11    

Bonjour,
 
J'ai lu qu'apparement document.write() était à éviter pour diverses raisons. J'aimerais donc rectifier une partie de mon code qui s'en sert.
 
Pour situer les choses, mon document.write() fait appel à une fonction Javascript qui récupère l'url d'une image d'article et le titre de l'article. Cela permet d'afficher sur la page d'accueil, les titres des articles avec l'image correspondante.
 
Mon document.write() se présente donc sous cette forme :
 
document.write(imageUrlTitle("url_image", "Titre_article" );
 
J'ai essayé d'utiliser un innerHTML mais ça ne fonctionne pas. Ce n'est peut être pas la bonne méthode ou je m'y prends mal.
 
Un aiguillage m'arrangerait car je suis novice.
 
Merci par avance.


Message édité par lamnesik le 28-06-2019 à 18:45:50
Reply

Marsh Posté le 27-06-2019 à 14:27:11   

Reply

Marsh Posté le 27-06-2019 à 14:32:08    

Ce sera plus simple si tu utilises jquery par exemple...
 
Sinon en pur javascript pour insérer une image ca se présente comme ca:
 

Code :
  1. var img = document.createElement('img');
  2. img.setAttribute("src", src);
  3. img.setAttribute("alt", alt);
  4. document.body.appendChild(img);


 
Ca va créer (considérant que src et alt sont deux variables remplies):

Code :
  1. ...
  2. <body>
  3.   <img src="myurl.png" alt="my alt" />
  4. </body>


 
Le tag IMG sera inséré a la fin des fils (le plus en bas possible avant la fin de </body> en gros).
 
En gros, c'est a tweaker avec ce que tu as réellement besoin...

Reply

Marsh Posté le 28-06-2019 à 18:44:32    

Bonjour,
 
Justement dans mon code, jQuery a été déclaré de la façon suivante :
 

Code :
  1. <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>


 
Je peux donc travailler avec. Par contre, je suis complètement novice donc un peu d'aide ne serait pas de refus sans me mâcher le boulot, juste m'orienter sur la bonne voie :)
 
Pour info, je retranscris le code de la fonction et de son appel :
 

Code :
  1. <script type="text/javascript">
  2. document.write(bp_thumbnail_resize("url_image_article","titre_article" ));
  3. </script>


 

Code :
  1. <script type="text/javascript">
  2. //<![CDATA[
  3. function bp_thumbnail_resize(e,t){
  4. var n=80;
  5. var r=80;
  6. image_tag='<img width="'+n+'" height="'+r+'" src="'+e.replace("/s72-c/","/w"+n+"-h"+r+"-c/" )+'" alt="'+t.replace(/"/g,"" )+'" title="'+t.replace(/"/g,"" )+'"/>';
  7. if(t!="" )return image_tag;else return""
  8. }
  9. //]]>
  10. </script>


 
 :jap:

Message cité 1 fois
Message édité par lamnesik le 28-06-2019 à 18:47:23
Reply

Marsh Posté le 03-07-2019 à 10:46:50    

lamnesik a écrit :

Bonjour,
 
Justement dans mon code, jQuery a été déclaré de la façon suivante :
 

Code :
  1. <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>


 
Je peux donc travailler avec. Par contre, je suis complètement novice donc un peu d'aide ne serait pas de refus sans me mâcher le boulot, juste m'orienter sur la bonne voie :)
 
Pour info, je retranscris le code de la fonction et de son appel :
 

Code :
  1. <script type="text/javascript">
  2. document.write(bp_thumbnail_resize("url_image_article","titre_article" ));
  3. </script>


 

Code :
  1. <script type="text/javascript">
  2. //<![CDATA[
  3. function bp_thumbnail_resize(e,t){
  4. var n=80;
  5. var r=80;
  6. image_tag='<img width="'+n+'" height="'+r+'" src="'+e.replace("/s72-c/","/w"+n+"-h"+r+"-c/" )+'" alt="'+t.replace(/"/g,"" )+'" title="'+t.replace(/"/g,"" )+'"/>';
  7. if(t!="" )return image_tag;else return""
  8. }
  9. //]]>
  10. </script>


 
 :jap:


 
Replace ton doucment.write par un innerHTML
 
 

Code :
  1. <div id="divouonmetlebazar"><div>
  3. // et plus loin dans ton JS :  
  5. document.getElementById("divouonmetlebazar" ).innerHTML = bp_thumbnail_resize("url_image_article","titre_article" );


Reply

Marsh Posté le 03-07-2019 à 15:59:32    

Pourquoi aller chercher la lib JQuery chez Google et pas la mettre en local de ton site web :??:
T'aime tant que ça te faire fliquer et faire fliquer tes utilisateurs par un GAFAM ?


Message édité par rufo le 03-07-2019 à 15:59:48

---------------
Astres, outil de help-desk GPL : http://sourceforge.net/projects/astres, ICARE, gestion de conf : http://sourceforge.net/projects/icare, Outil Planeta Calandreta : https://framalibre.org/content/planeta-calandreta
Reply

Marsh Posté le 03-07-2019 à 16:15:37    

<hors-sujet>
Les cdns c'est aussi écologique puisque si tout le monde utilisait le même repo pour la même version de Jquery, elle serait dans le cache du navigateur pour chaque site l'utilisant...
 
Et puis le nombre de requête simultané étant limité sur un serveur (10 je crois) pouvoir externaliser certaine ressources accélére un peu le chargement.
 
Enfin comparer un CDN à du fliquage, je trouves un peu excessif, tous ce qu'ils auront c'est une IP et un referer, ça vas pas aller très loin, on en est loin du degré de fliquage de Chrome (qui est de loin le plus utilisé des Navigateurs) ou du tag Analitycs qui est lui aussi présent sur un très grand nombre de site...
 
J'ai souvent mes propres version de JQuery sur mes sites, surtout dans un soucis de sécurité car si la bibliothèque JS est compromise cela peut avoir un impact grave sur le site (vol de compte ou autre), mais son usage se défend quand même...
</hors-sujet>
 
Si tu as Jquery de chargé tu peux utiliser append() :
https://api.jquery.com/append/

Code :
  1. $('body').append(bp_thumbnail_resize("url_image_article","titre_article" ));

Message cité 2 fois

---------------
D3
Reply

Marsh Posté le 03-07-2019 à 16:45:50    

HS aussi, désolé

mechkurt a écrit :

Enfin comparer un CDN à du fliquage, je trouves un peu excessif, tous ce qu'ils auront c'est une IP et un referer, ça vas pas aller très loin

mais suffisamment loin pour faire un effort pour l'éviter si possible. Un referer et une IP (statique la plupart du temps de nos jours?) c'est une info "personne X est allée sur tel site à tel moment", ce n'est pas rien! Perso je bloque Google / le JS Google, après les trucs qui ne marchent plus tant pis... Faut faire un choix.
(Sans dire que le mieux c'est encore d'aller le plus loin possible en HTML/CSS pur sans Javascript!!)
(et oui, Google ne fait que mettre en ligne jquery qui est un script connu, je sais)


Message édité par rat de combat le 03-07-2019 à 16:46:48
Reply

Marsh Posté le 03-07-2019 à 17:35:14    

mechkurt a écrit :

<hors-sujet>
Les cdns c'est aussi écologique puisque si tout le monde utilisait le même repo pour la même version de Jquery, elle serait dans le cache du navigateur pour chaque site l'utilisant...
 
Et puis le nombre de requête simultané étant limité sur un serveur (10 je crois) pouvoir externaliser certaine ressources accélére un peu le chargement.
 
Enfin comparer un CDN à du fliquage, je trouves un peu excessif, tous ce qu'ils auront c'est une IP et un referer, ça vas pas aller très loin, on en est loin du degré de fliquage de Chrome (qui est de loin le plus utilisé des Navigateurs) ou du tag Analitycs qui est lui aussi présent sur un très grand nombre de site...
 
J'ai souvent mes propres version de JQuery sur mes sites, surtout dans un soucis de sécurité car si la bibliothèque JS est compromise cela peut avoir un impact grave sur le site (vol de compte ou autre), mais son usage se défend quand même...
</hors-sujet>
 
Si tu as Jquery de chargé tu peux utiliser append() :
https://api.jquery.com/append/


Code :
  1. $('body').append(bp_thumbnail_resize("url_image_article","titre_article" ));


<hs>
Merci pour ces explications. Cependant, je pense qu'il y a des CDN plus appropriés que Google, dans le cas présent. Un referer + une IP, ce n'est pas énorme, mais avec tout ce que Google a déjà sur les gens, ça devient beaucoup. Après, c'est clair que Google Analytics étant présent sur 90% des sites, on se fait gauler presque à chaque coup :(
</hs>


---------------
Astres, outil de help-desk GPL : http://sourceforge.net/projects/astres, ICARE, gestion de conf : http://sourceforge.net/projects/icare, Outil Planeta Calandreta : https://framalibre.org/content/planeta-calandreta
Reply

Marsh Posté le 03-07-2019 à 19:24:15    

Je remettrai plus en question le fait d'utiliser Jquery. :D


---------------
C'est en écrivant n'importe quoi qu'on devient n'importe qui.
Reply

Marsh Posté le 03-07-2019 à 20:35:53    

+1 :D
Je vois tellement de jeunes dévs mettre JQuery juste pour pouvoir faire $().


---------------
Astres, outil de help-desk GPL : http://sourceforge.net/projects/astres, ICARE, gestion de conf : http://sourceforge.net/projects/icare, Outil Planeta Calandreta : https://framalibre.org/content/planeta-calandreta
Reply

Marsh Posté le 03-07-2019 à 20:35:53   

Reply

Marsh Posté le 04-07-2019 à 09:19:50    

Ben au moins on est sur de maximiser la compatibilité à moindre effort, tout le monde ne connait pas la table compatibilité des navigateurs par cœur, quand on démarre en javascript la doc de Jquery (et les tutos dispo) sont quand même plus accessible (et compatible) que Vanilla JS...
 
...personnellement j'ai appris à coder en JS avec Mootools et effectivement j'ai tendance à systématiquement embarquer une petite librairie car se me simplifie la vie.
 
Même si il est vrai que maintenant il y a une bien plus grande compatibilité des choses comme querySelectorAll


---------------
D3
Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed