Comprendre le cycle de vie des objets DOM

Dev
1

Salut à tous. J’essaie de résoudre un problème avec ce que je pense être le cycle de vie des objets DOM. J’ai lu ce fil de discussion A tour of how the Widget (Virtual DOM) code in Discourse works, mais cela n’aide toujours pas à répondre à ma question, ou du moins à m’orienter vers une solution. J’ai du mal à comprendre.

J’ai écrit un plugin très basique comme wrapper pour un service externe (moteur de chat Rumbletalk, pour être précis). Le plugin fonctionne comme je le souhaite, le chat fonctionne, etc., sauf si vous quittez le chat pour une autre partie de mon site, puis revenez au chat. Je reçois une erreur de leur javascript inclus que j’essaie de créer un doublon de chat.

Le plugin est un simple hbs/widget qui crée le HTML suivant :

<div style="height: 500px;">
  <div id="$MY_ID"></div>
  <script src="https://rumbletalk.com/client/?$MY_OTHER_ID"></script>
</div>

Et contient également du code javascript de connexion.

Je suppose que quelque part dans le DOM, le HTML rendu est toujours présent, et lorsque cette balise script se charge et s’exécute à nouveau, elle le détecte. Lorsque je débogue dans la console de développement, je vois l’erreur provenir du javascript de la balise script, pas du code de connexion.

J’ai contacté le personnel de Rumbletalk, mais je n’ai pas encore eu de réponse. Quelqu’un a-t-il une suggestion sur ce que je peux examiner ensuite ? La seule chose que j’ai réussi à faire est d’ajouter un gestionnaire window.onerror, puis de faire un location.reload(). Ce n’est évidemment pas une bonne solution. Existe-t-il un moyen de “vider” les objets DOM du moteur de chat lorsque la page perd le focus ?

Merci pour toute aide.

-=Bob

2

Salut Bob :wave:

Ton problème dépasse un peu le cadre du HTML

<script src="https://rumbletalk.com/client/?$MY_OTHER_ID"></script>

Ce script exécute une IIFE, initialise une instance et stocke l’instance dans la portée globale. La portée globale est la même pour toute la session dans Discourse car il s’agit d’une application monopage. Tu peux vérifier cela avec

console.log(RumbleTalkChat)

Après que le script se soit chargé pour la première fois. Donc, RumbleTalkChat["$MY_OTHER_ID"] est ce dont le script se plaint

if (e.RumbleTalkChat[a.hash]) {
  throw new Error("Trying to create a duplicate chat with code: " + a.hash);
}

Tu peux essayer de supprimer cette instance avant que le script ne se charge à nouveau avec quelque chose comme ceci

delete RumbleTalkChat["$MY_OTHER_ID"]

Note qu’il ne contient pas le caractère ?.

Cela dit, tu ferais probablement mieux de comprendre pourquoi le script est chargé plusieurs fois en premier lieu. Je vois que le script a une méthode openChat() que tu peux appeler. Donc charger le script plusieurs fois pourrait ne pas être nécessaire.

Malheureusement, tu devrais fournir plus de détails sur l’endroit où l’intégration va et comment tu ajoutes le balisage avant que nous puissions identifier la cause.

4 « J'aime »
3

Salut Joe
Merci pour l’explication de l’IIFE, je pensais que c’était QUELQUE CHOSE comme ça, ou, comme le disait le titre, que c’était un objet à portée DOM. J’ai vu la vérification

if (e.RumbleTalkChat[a.hash]) {
  throw new Error("Trying to create a duplicate chat with code: " + a.hash);
}

dans le module également. Ce module est chargé avec le reste de la page lors du rendu du widget. Je vais voir si je peux déplacer cela éventuellement dans l’initialiseur, puis simplement rendre le formulaire.

Merci encore, en avant et vers le haut !

2 « J'aime »