如何在Sveltekit网页上直接使用Google翻译

发布于 2025-01-29 19:02:26 字数 593 浏览 3 评论 0原文

我一直在使用Google Translator直接在Sveltekit Web应用程序上使用以下代码遇到问题

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

。代码>，但是它一直在出现和消失。请我如何实现，请注意，我正在使用静态适配器，请提前

原文

I've been having issues using google translator directly on my sveltekit web app using the following code

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

I've tried several approaches, for example putting the code in <svelte:head></svelte:head> but yet it's kept appearing and disappearing.
Please how can I achieve this,
Note I'm using Static adapter, thanks in advance

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

溺孤伤于心 2025-02-05 19:02:26

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

I had to load the script manually after mounting of component. It works with SvelteKit too.

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>

回复收藏 0 原文

~没有更多了~