L’architecture web moderne repose rarement sur du HTML statique. Le contenu est injecté via JavaScript, récupéré via des API ou rendu côté client à l’aide de frameworks tels que React ou Vue . MultiLipi est conçu pour gérer cela « DOM volatile. » Notre script ne traduit pas simplement la page une fois chargée ; elle établit un persistent MutationObserver pour détecter et traduire de nouveaux nœuds au fur et à mesure qu’ils sont injectés dans l’arbre DOM.
Ce guide explique comment notre infrastructure fonctionne charges utiles dynamiques, requêtes AJAX et états interactifs .
1. Le défi du contenu « volatile »
Les proxys de traduction standards échouent lorsque le contenu change après le chargement initial.
Supports MultiLipi :
Rendu côté client (CSR)
Des applications basées sur React, Vue, Angular ou Svelte.
Récupérations asynchrones
Le contenu était chargé via AJAX/API Fetch (par exemple, défilement infini ou résultats de recherche).
États interactifs
Erreurs de validation de formulaires, totaux de paniers et toasts de notifications.
2. L’architecture d’ingénierie
Comment nous traduisons sans casser votre application.
Notre moteur JavaScript exécute un Processus de surveillance continue Côté client :
Observation du DOM :
MutationObserver Nous utilisons l’API native MutationObserver du navigateur pour surveiller les changements dans le <body>.</body>
Détection :
<div>Quand votre application injecte un nouveau <div> (par exemple, en ouvrant un modal), notre observateur le signale immédiatement.</div>
Injection instantanée :
< 50ms Le texte est envoyé dans notre cache ou API locale. Si une traduction existe en mémoire, elle est échangée instantanément (souvent en moins de 50 ms), apparaissant sans interruption pour l’utilisateur.
Préservation de l’État :
Nœuds textuels uniquement Nous ne modifions que les nœuds textuels. Nous ne détruisons pas les éléments DOM ni ne retirons les auditeurs de l’événement, garantissant que vos liaisons React/Vue restent intactes.
3. Meilleures pratiques pour le texte dynamique
Pour garantir que le MutationObserver fonctionne efficacement, suivez ces directives architecturales :
Nœuds textuels stables
Évitez les chaînes qui changent toutes les secondes (comme un compte à rebours : « 00:01 », « 00:02 »). Cela inonde le moteur de traduction de milliers de requêtes uniques.
Approche recommandée :
<span>Heure :</span> <span class="notranslate">00:01</span>
Enveloppage HTML propre
Assurez-vous que le texte est enveloppé dans des balises spécifiques (<p>, <span>, <div>) plutôt que de flotter librement dans le <body>. Cela aide l’observateur à isoler le segment.</body></div></span>
Bonnes pratiques :
<p>Your text here</p> <!-- Good --> Loose text <!-- Bad -->
Évitez les effets de « saisie »
Des scripts qui « tapent » un texte caractère par caractère (t... te... Tex... texte) embrouillent les moteurs de traduction. Affichez la chaîne de texte intégrale d’un coup.
Conseil de mise en œuvre :
// Render complete text instead of character-by-character animation
<p>{fullText}</p>4. Cas Limite : iFrames
Une note sur les limitations des origines croisées.
Si votre contenu dynamique se trouve à l’intérieur d’un iFrame (par exemple, un widget de chat tiers ou une passerelle de paiement) :
Même origine :
Si l’iFrame est hébergé sur votre domaine , MultiLipi peut le traduire .
Origine croisée :
Si l’iFrame se charge depuis un Domaine externe (par exemple, Stripe, Interphone), nous impossible de le traduire en raison des politiques de sécurité des navigateurs (CORS).
Vous devez configurer directement les paramètres de traduction dans cet outil tiers.
Résumé
Vous n’avez pas besoin d’installer des SDK spécifiques pour React ou Angular. Une fois le script MultiLipi activé, se connecte automatiquement au moteur de rendu du navigateur pour traduire un quelconque contenu— statique ou dynamique —qui apparaît à l’écran.