A arquitetura web moderna raramente depende de HTML estático. O conteúdo é injetado via JavaScript, obtido através de APIs ou renderizado no lado do cliente utilizando frameworks como React ou Vue. MultiLipi foi concebido para lidar com isto "DOM Volátil." O nosso script não se limita a traduzir a página uma vez ao carregar; estabelece um MutationObserver para detetar e traduzir novos nós à medida que são injetados na árvore do DOM.

Este guia explica como a nossa infraestrutura gere cargas úteis dinâmicas, pedidos AJAX e estados interativos.

1. O Desafio do Conteúdo "Volátil"

Os proxies de tradução padrão falham quando o conteúdo muda após o carregamento inicial.

MultiLipi suporta:

Renderização no Lado do Cliente (CSR)

Aplicações criadas em React, Vue, Angular ou Svelte.

Obtenções Assíncronas

Conteúdo carregado através de APIs AJAX/Fetch (por exemplo, deslocamento infinito ou resultados de pesquisa).

Estados Interativos

Erros de validação de formulários, totais de carrinhos e avisos de notificação.

2. A Arquitetura de Engenharia

Como traduzimos sem corromper a sua aplicação.

O nosso motor JavaScript executa um processo de monitorização contínua no lado do cliente:

Observação do DOM:

MutationObserver

Utilizamos a API nativa do navegador MutationObserver para monitorizar alterações no .

Deteção:

Quando a sua aplicação injeta um novo

(por exemplo, ao abrir uma janela modal), o nosso observador sinaliza-o imediatamente.

Injeção Instantânea:

< 50ms

O texto é enviado para a nossa cache local ou API. Se existir uma tradução na memória, esta é trocada instantaneamente (frequentemente em menos de 50ms), parecendo impercetível para o utilizador.

Preservação de Estado:

apenas nós de texto

Modificamos apenas nós de texto. Não destruímos elementos DOM nem removemos ouvintes de eventos, garantindo que as suas vinculações React/Vue permanecem intactas.

3. Melhores Práticas para Texto Dinâmico

Para garantir que o MutationObserver funciona de forma eficiente, siga estas diretrizes arquitetónicas:

Nós de Texto Estáveis

Evite sequências de caracteres que mudam a cada segundo (como um temporizador de contagem decrescente: "00:01", "00:02"). Isto sobrecarrega o motor de tradução com milhares de pedidos únicos.

Abordagem Recomendada:

Time: 00:01

Envolvimento de HTML Limpo

Certifique-se de que o texto está envolvido por tags específicas (

, ,

) em vez de flutuar livremente no . Isto ajuda o observador a isolar o segmento.

Melhores Práticas:

O seu texto aqui

Texto solto

Evitar Efeitos de "Digitação"

Os scripts que escrevem o texto carácter a carácter (t... te... tex... texto) confundem os motores de tradução. Renderize a string de texto completa de uma só vez.

Dica de Implementação:

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

4. Caso Extremo: iFrames

Uma nota sobre limitações de origem cruzada.

Se o seu conteúdo dinâmico residir dentro de um iFrame (por exemplo, um widget de chat de terceiros ou portal de pagamento):

Mesma Origem:

Se o iFrame estiver alojado em o seu domínio, MultiLipi consegue traduzi-lo.

Cross Origin:

Se o iFrame carregar a partir de um domínio externo (por exemplo, Stripe, Intercom), nós não o consegue traduzir devido a políticas de segurança do navegador (CORS).

Deve configurar as definições de tradução diretamente nessa ferramenta de terceiros.

Resumo

Não precisa de instalar SDKs específicos para React ou Angular. Assim que o script do MultiLipi estiver ativo, ele liga-se automaticamente ao motor de renderização do navegador para traduzir qualquer conteúdo—estático ou dinâmico—que aparece no ecrã.

Como Traduzir Conteúdo Dinâmico com MultiLipi