如何在页面中分别为桌面端和移动端添加两个Google Translate翻译组件

问题原因 #

• 同一页面内HTML的id属性必须全局唯一，你当前桌面端和移动端的翻译容器都用了同一个google_translate_element id，Google翻译脚本初始化时只会匹配到第一个符合的元素，第二个容器无法被识别。
• 不需要重复引入Google翻译的官方脚本，单次引入后可以同时初始化多个组件实例。

解决方案 #

步骤1：修改两个容器的ID，确保互不重复 #

桌面端容器代码：

<div id="google_translate_desktop"></div>

移动端容器代码：

<div id="google_translate_mobile"></div>

步骤2：修改初始化函数，同时渲染两个翻译组件 #

仅保留一份翻译脚本引入即可，修改后的完整脚本代码如下：

<script>
function googleTranslateElementInit() {
    // 渲染桌面端翻译组件
    new google.translate.TranslateElement(
        {pageLanguage: 'en'},
        'google_translate_desktop'
    );
    // 渲染移动端翻译组件
    new google.translate.TranslateElement(
        {pageLanguage: 'en'},
        'google_translate_mobile'
    );
}
</script>
<script src="http://translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>

额外说明 #

两个翻译组件的状态会自动同步，用户在任意一端切换翻译语言，另一端也会同步生效，不需要额外做状态同步处理，你可以继续用原有CSS规则控制两个容器在不同设备尺寸下的显示和隐藏。

内容的提问来源于stack exchange，提问作者tech