如何使用Google Translate-API在JS中翻译整个页面的文本内容

时间:2019-07-29 13:13:15

标签: javascript html google-translation-api

我有一个网页。它有很多文本数据。如何使用Google Translate-API翻译所有文本数据?

我尝试了一些代码并进行了开发,但是它只更改特定文本或一次更改整个文本并打印一次。

这是我尝试开发的代码,但未成功。

build

我想翻译整个页面,但页面不应损坏。它像页面上的Google-翻译一样运行。

1 个答案:

答案 0 :(得分:0)

我认为使用Google翻译的下拉菜单而不是您创建的表单可能更简单。然后,您可以将下拉菜单的选项限制为要包含的语言。为此,您可以像在下面的代码中所做的那样,向该功能添加包含的语言。我使用了原始形式的语言。如果要更改下拉菜单中提供的语言,只需将该语言的特定缩写添加到随附的语言列表中即可。

All the abbreviations for languages with google translate

一旦我将代码切换为仅使用google translation下拉菜单,页面上的所有文本均已翻译。

<!DOCTYPE html>
            <html lang="en-US">
            <body>

            <p id="textField">You can translate the content of this page by selecting a language in the select box.</p>

            <h1 id="title">My Web Page</h1>

            <p>Hello everybody!</p>

            <p>Translate this page:</p>

            <div id="google_translate_element"></div>

            <script type="text/javascript">
            function googleTranslateElementInit() {
              new google.translate.TranslateElement({pageLanguage: 'en', includedLanguages: 'zh-CN,cs,da,nl,en,et,fr'}, 'google_translate_element');
            }

            </script>

            <script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>


            </body>
            </html>