La moderna architettura web raramente si basa su HTML statico. Il contenuto viene iniettato tramite JavaScript, recuperato tramite API o renderizzato lato client utilizzando framework come React o Vue. MultiLipi è progettato per gestire questo "DOM volatile." Il nostro script non si limita a tradurre la pagina una volta al caricamento; stabilisce una persistente MutationObserver per rilevare e tradurre nuovi nodi man mano che vengono iniettati nell'albero DOM.

Questa guida spiega come la nostra infrastruttura gestisce payload dinamici, richieste AJAX e stati interattivi.

1. La sfida dei contenuti "volatili"

I proxy di traduzione standard falliscono quando il contenuto cambia dopo il caricamento iniziale.

MultiLipi supporta:

Client-Side Rendering (CSR)

App create su React, Vue, Angular o Svelte.

Fetch asincroni

Contenuti caricati tramite API AJAX/Fetch (es. scroll infinito o risultati di ricerca).

Stati interattivi

Errori di validazione dei moduli, totali del carrello e notifiche toast.

2. L'architettura ingegneristica

Come traduciamo senza interrompere la tua app.

Il nostro motore JavaScript esegue un processo di monitoraggio continuo sul lato client:

Osservazione del DOM:

MutationObserver

Utilizziamo l'API nativa MutationObserver del browser per monitorare le modifiche nel .

Rilevamento:

Quando la tua app inietta un nuovo

(ad esempio, aprendo una modale), il nostro osservatore lo segnala immediatamente.

Iniezione Istantanea:

< 50ms

Il testo viene inviato alla nostra cache locale o API. Se una traduzione esiste nella memoria, viene sostituita istantaneamente (spesso in meno di 50 ms), apparendo senza interruzioni all'utente.

Conservazione dello stato:

solo nodi di testo

Modifichiamo solo i nodi di testo. Non distruggiamo elementi DOM né rimuoviamo listener di eventi, garantendo che i tuoi binding React/Vue rimangano intatti.

3. Migliori pratiche per il testo dinamico

Per garantire che MutationObserver funzioni in modo efficiente, segui queste linee guida architetturali:

Nodi di testo stabili

Evita stringhe che cambiano ogni secondo (come un conto alla rovescia: "00:01", "00:02"). Questo inonda il motore di traduzione con migliaia di richieste uniche.

Approccio consigliato:

Ora: 00:01

Avvolgimento HTML pulito

Assicurati che il testo sia racchiuso in tag specifici (

, ,

) piuttosto che fluttuare liberamente nel . Questo aiuta l'osservatore a isolare il segmento.

Migliore Pratica:

Il tuo testo qui

Testo libero

Evita effetti di "digitazione"

Gli script che "digitano" il testo carattere per carattere (t... te... tes... testo) confondono i motori di traduzione. Esegui l'intera stringa di testo in una volta.

Suggerimento per l'implementazione:

// Render complete text instead of character-by-character animation
<p>{fullText}</p>

4. Caso limite: iFrame

Una nota sulle limitazioni cross-origin.

Se il tuo contenuto dinamico si trova all'interno di un iFrame (es. un widget di chat di terze parti o un gateway di pagamento):

Stessa Origine:

Se l'iFrame è ospitato su il tuo dominio, MultiLipi può tradurlo.

Origine incrociata:

Se l'iFrame viene caricato da un dominio esterno (ad esempio, Stripe, Intercom), noi non possiamo tradurlo a causa delle policy di sicurezza del browser (CORS).

Devi configurare le impostazioni di traduzione direttamente in quello strumento di terze parti.

Riepilogo

Non è necessario installare SDK specifici per React o Angular. Una volta che lo script MultiLipi è attivo, esso si aggancia automaticamente al motore di rendering del browser per tradurre qualsiasi contenuto—statico o dinamico—che appare sullo schermo.

Come tradurre contenuti dinamici con MultiLipi