Discussion :

[Cryptodroid]

Bonjour,
Tout d'abord, sachez que ce que je vais expliquer peut paraître étrange, mais j'ai fais plusieurs test et c'est bien comme cela que ça se passe.
Je veux faire marcher un widget javascript sur mon site sous wordpress (WPSuperCache, compresssion, mimification, cache du navigateur). Ce dernier est un script connu, utilisé, et qui fonctionne très bien sur d'autres sites sans mon problème.
Le script en question:

Code :

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
 
<script>
baseUrl = "https://widgets.cryptocompare.com/";
var scripts = document.getElementsByTagName("script");
var embedder = scripts[ scripts.length - 1 ];
var cccTheme = {"General":{"borderWidth":"4px","borderColor":"#ecf0f1"},"Tabs":{"color":"#373e59","activeColor":"#373e59"},"Row":{"color":"#373e59","borderColor":"#ecf0f1"},"Trend":{"colorUp":"#27AE60","colorDown":"#E74C3C"},"Conversion":{"color":"#FFF"}};
(function (){
var appName = encodeURIComponent(window.location.hostname);
if(appName==""){appName="local";}
var s = document.createElement("script");
s.type = "text/javascript";
s.async = true;
var theUrl = baseUrl+'serve/v1/coin/multi?fsyms=BTC,ETH,XMR,LTC,DASH,IOT,EOS,NEO&tsyms=USD,EUR,BTC';
s.src = theUrl + ( theUrl.indexOf("?") >= 0 ? "&" : "?") + "app=" + appName;
embedder.parentNode.appendChild(s);
})();
</script>

Mais voilà, mis comme ça à la bonne place il ne fonctionne pas vraiment,voir pas du tout.
-Firefox desktop: marche 0%
- Chrome desktop: marche 0%
- Edge: marche après un rafraîchissement de la page
-Mobile: marche 100%

J'ai laissé un peu tombé tout en laissant le code, puis en faisant des manipulations j'ai inséré une balise <script></script> (vide) dans le footer.php et la..
- Chrome sans Ublock: marche 100%
- Chrome avec Ublock: marche 1/2 environ (il faut rafraichir la page, puis avec un nouveau rafraichissement ça marche plus etc..)
-Edge: marche après un rafraîchissement de la page
- Mobile: marche

J'ai bien vérifié qu'en enlevant le <script> dans le footer que ça ne marche plus et qu'il avait donc une importance.

Je suis totalement perdu, avez-vous une idée? Peut être que le script est viré quand la page est fraiche, peut être qu'il manque des trucs pour l'initier, vraiment je sais pas.

Merci

[Loralina]

Bonjour,

il ne fonctionne pas vraiment,voir pas du tout.

C'est visible et non fonctionnel ou pas visible du tout ?

Une piste serait de regarder avec l'inspecteur le code généré.
Quand je place le script tel quel dans un fichier vide, rien ne s'affiche : dans l'inspecteur, je vois que des balises sont insérées dans le head.
Si je le place après une balide body, ça apparaît.

Peut-être qu'en regardant l'inspecteur, il serait possible de voir si l'intégration est bien placée et aussi s'il n'y a pas des erreurs javascript dans la console.

[Cryptodroid]

Non visible. L'interface se réorganise même comme ci le site n'avait jamais été la (ça ne fait donc pas de carré blanc/transparent).
J'avais vraiment pas pensé à la console, et très bonne idée car quand ça ne marche pas j'ai cette erreur:
-Chrome:

Code :

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

1
2
Uncaught TypeError: Cannot read property 'appendChild' of null
    at multi?fsyms=BTC,BCH,ETH,XMR,LTC,DASH,IOT,EOS,NEO&tsyms=USD,EUR,BTC&app=cryptoactu.com:789

-Firefox (tout le temps du coup):

Code :

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

1
2
TypeError: document.currentScript.parentNode is null[En savoir plus]  multi:789:1
	<anonyme> https://widgets.cryptocompare.com/serve/v1/coin/multi:789:1

Je sais maintenant d'où cela vient, mais je ne suis pas très avancé quant à la résolution du problème.
Merci pour ta réponse en tout cas.

[Loralina]

Dans le code initialement posté, on voit qu'un script externe est chargé grâce à une nouvelle balise script créée dans le code avec document.createElement("script").

D'après l'erreur signalée, je déduis que l'adresse du script est :
https://widgets.cryptocompare.com/se...cryptoactu.com
La ligne 789, c'est la dernière : document.currentScript.parentNode.appendChild(embedable);.

Firefox dit que le nœud parent de document.currentScript n'existe pas.
Il reste à voir où est ajoutée cette balise script dans le code.
Dans l'inspecteur (à côté de la console) on devrait trouver cette balise :

Code :

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

<script type="text/javascript" async="" src="https://widgets.cryptocompare.com/serve/v1/coin/multi?fsyms=BTC,BCH,ETH,XMR,LTC,DASH,IOT,EOS,NEO&tsyms=USD,EUR,BTC&app=cryptoactu.com"></script>

Il faudrait voir aussi avec console.log ce que vaut embedder.parentNode, étant donné que la balise de script est ajoutée aux enfants de ce noeud.
Si besoin, on peut adapter le code de départ et modifier embedder pour cibler un autre nœud.

J'ajoute (21h) :
Par rapport à l'erreur sur document.currentScript.parentNode, peut-être qu'il pourrait y avoir une erreur plus directement sur document.currentScript (mais je me demande si le message d'erreur serait le même).
Peut-être essayer de désactiver cette ligne s.async = true; ou mettre false. C'est juste une vague idée à tenter.

[Cryptodroid]

Merci encore pour ta réponse
La balise

Code :

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

<script type="text/javascript" async="" src="https://widgets.cryptocompare.com/serve/v1/coin/multi?fsyms=BTC,BCH,ETH,XMR,LTC,DASH,IOT,EOS,NEO&tsyms=USD,EUR,BTC&app=cryptoactu.com"></script>

n’était pas présente dans le code source (peut importe si le widget marche ou pas), je n'ai que le script que j'ai donné lors de mon post initial.
J'ai essayé de l'ajouter en plus et tout fonctionne sur tous les navigateurs. Par contre, j'ai du coup deux fois le widget qui s'affiche dans les conditions qui marchaient.
Si j'enlève le code initial, forcément le widget marche mais je perd les personalisations (variable ccctheme)
console.log(embedder.parentNode) me retourne:

Code :

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

1
2
null
undefined

[Loralina]

Si j'enlève le code initial, forcément le widget marche mais je perd les personalisations (variable ccctheme)

Il devrait suffire de l'ajouter juste avant :

Code :

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

1
2
3
4
<script>
var cccTheme = {"General":{"borderWidth":"4px","borderColor":"#ecf0f1"},"Tabs":{"color":"#373e59","activeColor":"#373e59"},"Row":{"color":"#373e59","borderColor":"#ecf0f1"},"Trend":{"colorUp":"#27AE60","colorDown":"#E74C3C"},"Conversion":{"color":"#FFF"}};
</script>
<script src="https://widgets.cryptocompare.com/serve/v1/coin/multi?fsyms=BTC,BCH,ETH,XMR,LTC,DASH,IOT,EOS,NEO&tsyms=USD,EUR,BTC&app=cryptoactu.com"></script>

console.log(embedder.parentNode) me retourne:
null
undefined

Le problème vient probablement de là, mais c'est assez curieux par rapport au fait que le script semble s'exécuter malgré tout.

La balise
...
n’était pas présente dans le code source

Je précise qu'il s'agit de regarder vraiment dans l'inspecteur (F12, onglet "Inspecteur" sur Firefox) et non dans le code source initial (qui ne montrera pas les changements apportés à la page).

Mais bon, je pense que le script initial est mal intégré dans la page (à voir aussi s'il est en lien avec un événement comme load).
Après, comme je disais, on peut rester sur le script de départ et cibler un autre nœud.

[Cryptodroid]

Merci vraiment pour ton aide, j'ai ajouté la variable et ça marche comme escompté.
Quand je parlais de code source, je parlais du code reçu côté client (Crtl+U), ce qui est pareil que ce qui est affiché dans l'inspecteur non?

Bon, c'est très étrange mais tant pis ça marche avec la bricole donc c'est super!

[Loralina]

Quand je parlais de code source, je parlais du code reçu côté client (Crtl+U), ce qui est pareil que ce qui est affiché dans l'inspecteur non?

Ah non, pas pareil justement.
Quand je parlais du "code source initial", je parlais bien du "code reçu côté client" (et non des fichiers sources).
Avec l'inspecteur, on peut voir en temps réel les changements et l'interprétation que fait le navigateur du code source.
Si un script ajoute un élément dans l'arborescence, il va apparaître dans l'inspecteur (et non dans le code affiché avec Crtl+U).
Je pense qu'en regardant dans l'inspecteur, le problème aurait pu être mieux étudié.