Forum |  HardWare.fr | News | Articles | PC | S'identifier | S'inscrire | Shop Recherche
1747 connectés 

  FORUM HardWare.fr
  Programmation
  Javascript/Node.js

  alternative à document.write()

 


 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

alternative à document.write()

n°2336020
lamnesik
La mémoire est dans le cœur
Posté le 27-06-2019 à 14:27:11  profilanswer
 

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
mood
Publicité
Posté le 27-06-2019 à 14:27:11  profilanswer
 

n°2336021
Devil'sTig​er
Posté le 27-06-2019 à 14:32:08  profilanswer
 

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

n°2336061
lamnesik
La mémoire est dans le cœur
Posté le 28-06-2019 à 18:44:32  profilanswer
 

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
n°2336269
gatsu35
Blablaté par Harko
Posté le 03-07-2019 à 10:46:50  profilanswer
 

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>
  2. // et plus loin dans ton JS :  
  3. document.getElementById("divouonmetlebazar" ).innerHTML = bp_thumbnail_resize("url_image_article","titre_article" );


n°2336297
rufo
Pas me confondre avec Lycos!
Posté le 03-07-2019 à 15:59:32  profilanswer
 

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
n°2336306
mechkurt
Posté le 03-07-2019 à 16:15:37  profilanswer
 

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


---------------
D3
n°2336330
rat de com​bat
attention rongeur méchant!
Posté le 03-07-2019 à 16:45:50  profilanswer
 

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
n°2336342
rufo
Pas me confondre avec Lycos!
Posté le 03-07-2019 à 17:35:14  profilanswer
 

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
n°2336361
MaybeEijOr​Not
but someone at least
Posté le 03-07-2019 à 19:24:15  profilanswer
 

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


---------------
C'est en écrivant n'importe quoi qu'on devient n'importe qui.
n°2336367
rufo
Pas me confondre avec Lycos!
Posté le 03-07-2019 à 20:35:53  profilanswer
 

+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
mood
Publicité
Posté le 03-07-2019 à 20:35:53  profilanswer
 

n°2336395
mechkurt
Posté le 04-07-2019 à 09:19:50  profilanswer
 

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

Aller à :
Ajouter une réponse
  FORUM HardWare.fr
  Programmation
  Javascript/Node.js

  alternative à document.write()

 

Sujets relatifs
forcer le rafraichissement d'un documentDiviser un gros document Word en plusieurs Word unique (1200 pages)
Script qui récupère données fichier Excel vers documentConception - Créer un document de conception accessible
Alternative opencv c++ Linux webcam[ASP.NET] Alternative Crystal Reports pour hebergement ASP
Eviter le "document expiré"Récupérer le document.title d'une page distante.
Alternative à Code Ignitorcall vba apres fusion d'un document word
Plus de sujets relatifs à : alternative à document.write()


Copyright © 1997-2022 Hardware.fr SARL (Signaler un contenu illicite / Données personnelles) / Groupe LDLC / Shop HFR