Comprendere il ciclo di vita degli oggetti DOM

Sviluppatore
1

Ciao a tutti. Sto cercando di risolvere un problema con quello che penso sia il ciclo di vita degli oggetti DOM. Ho letto questo thread A tour of how the Widget (Virtual DOM) code in Discourse works ma ancora non mi aiuta a rispondere alla mia domanda, o almeno a indicarmi una direzione per provare a risolvere il mio problema. Ho difficoltà a capirlo.

Ho scritto un plugin molto semplice come wrapper per un servizio esterno (motore di chat Rumbletalk, per essere precisi). Il plugin funziona come vorrei, la chat funziona, ecc., tranne se ci si allontana dalla chat verso un’altra parte del mio sito e poi si torna alla chat. Ricevo un errore dal loro javascript incluso che sto cercando di creare una chat duplicata.

Il plugin è un semplice hbs/widget che crea il seguente HTML

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

E ha anche del codice javascript di accesso.

Presumo che da qualche parte nel DOM sia ancora presente l’HTML renderizzato, e quando questo tag script viene caricato ed eseguito di nuovo, lo rileva. Quando eseguo il debug nella console degli sviluppatori, vedo l’errore generato dallo javascript del tag script, non dal codice di accesso.

Ho contattato lo staff di Rumbletalk, ma non ho ancora ricevuto risposta. Qualcuno ha qualche suggerimento su cosa posso guardare dopo? L’unica cosa che sono riuscito a fare è aggiungere un gestore window.onerror e poi fare un location.reload(). Ovviamente questa non è una buona soluzione. C’è un modo per “svuotare” gli oggetti DOM del motore di chat quando la pagina perde il focus?

Grazie per qualsiasi aiuto

-=Bob

2

Ciao Bob :wave:

Il tuo problema va un po’ oltre l’HTML

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

Questo script esegue un IIFE, inizializza un’istanza e memorizza l’istanza nello scope globale. Lo scope globale è lo stesso per l’intera sessione in Discourse perché è un’applicazione a pagina singola. Puoi verificarlo con

console.log(RumbleTalkChat)

Dopo che lo script viene caricato per la prima volta. Quindi, RumbleTalkChat["$MY_OTHER_ID"] è ciò di cui lo script si lamenta

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

Puoi provare a rimuovere quell’istanza prima che lo script venga caricato di nuovo con qualcosa di simile

delete RumbleTalkChat["$MY_OTHER_ID"]

Nota che non contiene il carattere ?.

Detto questo, probabilmente starai meglio se scopri perché lo script viene caricato più volte in primo luogo. Vedo che lo script ha un metodo openChat() che puoi chiamare. Quindi caricare lo script più volte potrebbe non essere necessario.

Sfortunatamente, dovresti fornire maggiori dettagli su dove va l’embed e come stai aggiungendo il markup prima che possiamo individuare la causa.

4 Mi Piace
3

Ciao Joe
Grazie per la spiegazione dell’IIFE, pensavo fosse QUALCOSA del genere, o, come diceva il titolo, fosse un oggetto con ambito DOM. Ho visto anche il controllo

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

nel modulo. Quel modulo viene caricato con il resto della pagina al rendering del widget. Vedrò se riesco a spostarlo eventualmente nell’inizializzatore, e poi a renderizzare solo il modulo.

Grazie ancora, avanti e in alto!

2 Mi Piace