Moderne Webarchitekturen basieren selten auf statischem HTML. Inhalte werden über JavaScript injiziert, über APIs abgerufen oder clientseitig mit Frameworks wie React oder Vue. MultiLipi ist darauf ausgelegt, dies zu bewältigen "Volatiles DOM." Unser Skript übersetzt die Seite nicht nur einmal beim Laden; es etabliert einen persistenten MutationObserver um neue Knoten zu erkennen und zu übersetzen, sobald sie in den DOM-Baum eingefügt werden.

Diese Anleitung erklärt, wie unsere Infrastruktur damit umgeht dynamische Payloads, AJAX-Anfragen und interaktive Zustände.

1. Die Herausforderung "flüchtiger" Inhalte

Standard-Übersetzungsproxy schlagen fehl, wenn sich Inhalte nach dem anfänglichen Laden ändern.

MultiLipi unterstützt:

Client-Side Rendering (CSR)

Apps, die auf React, Vue, Angular oder Svelte basieren.

Asynchrone Abrufe

Inhalte, die über AJAX/Fetch-APIs geladen werden (z. B. unendliches Scrollen oder Suchergebnisse).

Interaktive Zustände

Formularvalidierungsfehler, Warenkorb-Gesamtbeträge und Benachrichtigungs-Toasts.

2. Die Engineering-Architektur

Wie wir übersetzen, ohne Ihre App zu beeinträchtigen.

Unsere JavaScript-Engine führt eine kontinuierlicher Überwachungsprozess auf der Client-Seite:

DOM-Beobachtung:

MutationObserver

Wir nutzen die native MutationObserver API des Browsers, um Änderungen im zu beobachten.

Erkennung:

Wenn Ihre App ein neues

injiziert (z. B. beim Öffnen eines Modals), markiert unser Observer es sofort.

Sofortige Injektion:

< 50ms

Der Text wird an unseren lokalen Cache oder an die API gesendet. Wenn eine Übersetzung im Speicher vorhanden ist, wird sie sofort ausgetauscht (oft in unter 50 ms) und erscheint dem Benutzer nahtlos.

Zustandserhaltung:

nur Textknoten

Wir modifizieren nur Textknoten. Wir zerstören keine DOM-Elemente und entfernen keine Event-Listener, sodass Ihre React/Vue-Bindungen intakt bleiben.

3. Best Practices für dynamischen Text

Um sicherzustellen, dass der MutationObserver effizient arbeitet, befolgen Sie diese Architekturrichtlinien:

Stabile Textknoten

Vermeiden Sie Zeichenketten, die sich jede Sekunde ändern (wie ein Countdown-Timer: "00:01", "00:02"). Dies überflutet die Übersetzungs-Engine mit Tausenden von eindeutigen Anfragen.

Empfohlener Ansatz:

Zeit: 00:01

Saubere HTML-Einbettung

Stellen Sie sicher, dass Text in bestimmten Tags (

, ,

) eingeschlossen ist, anstatt lose im zu schweben. Dies hilft dem Beobachter, das Segment zu isolieren.

Best Practice:

Ihr Text hier

Loser Text

Vermeiden Sie "Tipp-"Effekte

Skripte, die Text Zeichen für Zeichen „tippen“ (T... Te... Tex... Text) verwirren Übersetzungs-Engines. Rendern Sie die vollständige Textzeichenfolge auf einmal.

Implementierungstipp:

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

4. Sonderfall: iFrames

Ein Hinweis zu Cross-Origin-Beschränkungen.

Wenn Ihre dynamischen Inhalte sich innerhalb eines iFrame (z. B. ein Chat-Widget oder ein Zahlungs-Gateway von Drittanbietern):

Gleicher Ursprung:

Wenn das iFrame gehostet wird auf Ihre Domain, MultiLipi kann es übersetzen.

Fremder Ursprung:

Wenn der iFrame von einem externe Domain (z. B. Stripe, Intercom), wir kann es nicht übersetzen aufgrund von Browsersicherheitsrichtlinien (CORS).

Sie müssen die Übersetzungseinstellungen direkt in diesem Drittanbieter-Tool konfigurieren.

Zusammenfassung

Sie müssen keine spezifischen SDKs für React oder Angular installieren. Sobald das MultiLipi-Skript aktiv ist, wird es hakt sich automatisch in die Rendering-Engine des Browsers ein um Inhalte zu übersetzen—statisch oder dynamisch—das auf dem Bildschirm erscheint.

Wie man dynamische Inhalte mit MultiLipi übersetzt