Moderni verkkosivustoarkkitehtuuri perustuu harvoin staattiseen HTML:ään. Sisältö injektoidaan JavaScriptin avulla, haetaan API-rajapintojen kautta tai renderöidään asiakaspuolella käyttäen kehyksiä kuten React tai Vue. MultiLipi on suunniteltu käsittelemään tätä "epävakaata DOM:ia". Skriptimme ei ainoastaan käännä sivua kerran latauksen yhteydessä; se luo pysyvän MutationObserver yhteyden, joka havaitsee ja kääntää uusia solmuja niiden injektoituessa DOM-puuhun.

Tämä opas selittää, kuinka infrastruktuurimme käsittelee dynaamisia sisältöjä, AJAX-pyyntöjä ja interaktiivisia tiloja.

1. "Epävakaan" sisällön haaste

Standardit käännösvälityspalvelut epäonnistuvat, kun sisältö muuttuu alkuperäisen latauksen jälkeen.

MultiLipi tukee:

Asiakaspuolen renderöinti (CSR)

React-, Vue-, Angular- tai Svelte-pohjaisia sovelluksia.

Asynkroniset haut

Sisältöä ladattu AJAX/Fetch API:n kautta (esim. loputon vieritys tai hakutulokset).

Interaktiiviset tilat

Lomakkeiden validoinnin virheet, ostoskorin summat ja ilmoitusviestit.

2. Suunnitteluarkkitehtuuri

Kuinka käännämme rikkomatta sovellustasi.

JavaScript-moottorimme suorittaa jatkuvan valvontaprosessin asiakaspuolella:

DOM-havainnointi:

MutationObserver

Käytämme selaimen natiivia MutationObserver APIa tarkkailemaan muutoksia <body>-elementissä.

Tunnistus:

<div>

Kun sovelluksesi lisää uuden <div>-elementin (esim. avaa modaali-ikkunan), havaitsijamme merkitsee sen välittömästi.

Välitön lisäys:

< 50ms

Teksti lähetetään paikalliseen välimuistiimme tai APIin. Jos käännös löytyy muistista, se korvataan välittömästi (usein alle 50 ms:ssa), mikä näyttää käyttäjälle saumattomalta.

Tilan säilytys:

vain tekstisolmut

Muokkaamme vain tekstisolmuja. Emme tuhoa DOM-elementtejä emmekä poista tapahtumankuuntelijoita, mikä varmistaa React/Vue-sidosten pysymisen ennallaan.

3. Parhaat käytännöt dynaamiselle tekstille

Jotta MutationObserver toimisi tehokkaasti, noudata näitä arkkitehtuuriohjeita:

Vakaat tekstisolmut

Vältä merkkijonoja, jotka muuttuvat joka sekunti (kuten lähtölaskuri: "00:01", "00:02"). Tämä täyttää käännösmoottorin tuhansilla yksilöllisillä pyynnöillä.

Suositeltu lähestymistapa:

<span>Aika:</span> <span class="notranslate">00:01</span>

Puhdas HTML-kääre

Varmista, että teksti on kääritty tiettyihin tageihin (<p>, <span>, <div>) eikä ole vapaasti <body>-elementissä. Tämä auttaa tarkkailijaa eristämään segmentin.

Paras käytäntö:

<p>Tekstisi tähän</p>  <!-- Hyvä -->
Irtoteksti  <!-- Huono -->

Vältä "kirjoitustehosteita"

Skriptit, jotka "kirjoittavat" tekstiä merkki merkiltä (k... ka... kir... kirjoitus), sekoittavat käännöskoneita. Näytä koko tekstimerkkijono kerralla.

Toteutusvinkki:

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

4. Poikkeustapaus: iFramet

Huomautus ristiinkäyttörajoituksista.

Jos dynaaminen sisältösi sijaitsee iFramessa (esim. kolmannen osapuolen chat-widget tai maksuyhdyskäytävä):

Sama alkuperä:

Jos iFrame on isännöity domainillasi, MultiLipi voi kääntää sen.

Ristiinkäyttö:

Jos iFrame latautuu ulkoisesta domainista (esim. Stripe, Intercom), me emme voi kääntää sitä selainten turvakäytäntöjen (CORS) vuoksi.

Sinun on määritettävä käännösasetukset suoraan kyseisen kolmannen osapuolen työkalussa.

Yhteenveto

Sinun ei tarvitse asentaa erityisiä SDK:ita Reactille tai Angularille. Kun MultiLipi-skripti on aktiivinen, se integroituu automaattisesti selaimen renderöintimoottoriin kääntääkseen minkä tahansa sisällön—staattinen tai dynaaminen—joka näkyy näytöllä.

Kuinka kääntää dynaaminen sisältö MultiLipi -palvelulla