如何在 sveltekit 网页上直接使用 google 翻译

Question

我在使用以下代码直接在我的 sveltekit 网络应用程序上使用 google 翻译器时遇到问题

<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>

我尝试了几种方法，例如将代码放在 <svelte:head></svelte:head> 中，但它一直出现和消失。请问我怎样才能做到这一点，注意我使用的是静态适配器，在此先感谢

Answer 1

我必须在安装组件后手动加载脚本。它也适用于 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>

如何在 sveltekit 网页上直接使用 google 翻译

How can I use google translate directly on sveltekit web pages

javascript

web-frameworks

google-translate

svelte

sveltekit