He tenido problemas para usar el traductor de Google directamente en mi aplicación web sveltekit usando el siguiente código
<script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script> <script type="text/javascript"> function googleTranslateElementInit() { new google.translate.TranslateElement({pageLanguage: 'en', layout: google.translate.TranslateElement.InlineLayout.SIMPLE}, 'google_translate_element'); } // googleTranslateElementInit() </script> Probé varios enfoques, por ejemplo, poner el código en <svelte:head></svelte:head> pero sigue apareciendo y desapareciendo. Por favor, ¿cómo puedo lograr esto? Tenga en cuenta que estoy usando un adaptador estático, gracias de antemano
Tuve que cargar el script manualmente después de montar el componente. También funciona con SvelteKit.
onMount(() => { loadTranslate() setTimeout(function () { googleTranslateInit() }, 3000) }) function googleTranslateInit() { const checkIfGoogleLoaded = setInterval(() => { if (google != null && google.translate != null && google.translate.TranslateElement != null) { clearInterval(checkIfGoogleLoaded) googleTranslateElementInit() } }, 1000) } function googleTranslateElementInit() { new google.translate.TranslateElement({ pageLanguage: 'en' }, 'google_translate_element') } function loadTranslate() { loading = true if (browser) { const domElement = document.createElement('script') domElement.setAttribute('src', '//translate.google.com/translate_a/element.js') domElement.onload = () => { loadedTranslate = true } document.body.appendChild(domElement) } } </script> <template> <div id="google_translate_element" class="mb-2"></div> </template>