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 handhaben "Volatiles DOM." Unser Skript übersetzt die Seite nicht nur einmal beim Laden; es etabliert eine dauerhafte 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 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

Über AJAX/Fetch APIs geladene Inhalte (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 beschädigen.

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

DOM-Beobachtung:

MutationObserver

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

Erkennung:

Wenn Ihre App ein neues

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

Sofortige Einbindung:

< 50ms

Der Text wird an unseren lokalen Cache oder unsere API gesendet. Wenn eine Übersetzung im Speicher vorhanden ist, wird sie sofort ausgetauscht (oft in unter 50 ms), was für den Benutzer nahtlos erscheint.

Zustandserhaltung:

nur Textknoten

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

3. Best Practices für dynamischen Text

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

Stabile Textknoten

Vermeiden Sie Zeichenfolgen, 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 und nicht lose im schwebt. Dies hilft dem Observer, 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 den vollständigen Textstring auf einmal.

Implementierungshinweis:

// 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 in einem iFrame (z. B. ein Widget eines Drittanbieters für Chat oder Zahlungen):

Same Origin:

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

Cross Origin:

Wenn der iFrame von einer externen Domain (z. B. Stripe, Intercom), wir kann es nicht übersetzen aufgrund von Browser-Sicherheitsrichtlinien (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, greift automatisch in die Rendering-Engine des Browsers ein um beliebige Inhalte zu übersetzen—statisch oder dynamisch—das auf dem Bildschirm erscheint.

So übersetzen Sie dynamische Inhalte mit MultiLipi