如何设置Google Translate横幅固定可见或仅显示底部语言选项

两种配置均可通过调整Google Translate初始化参数、配合自定义CSS和JS实现，具体方案如下：

需求1：顶部翻译横幅始终可见，完全隐藏底部翻译选项 #

实现逻辑 #

强制开启顶部横幅自动显示，通过CSS隐藏底部翻译选择器组件。

完整代码 #

首先引入Google Translate基础SDK：

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

初始化JS：

function googleTranslateElementInit() {
    new google.translate.TranslateElement(
        {
            pageLanguage: 'en',
            includedLanguages: 'ar',
            layout: google.translate.TranslateElement.InlineLayout.HORIZONTAL,
            autoDisplay: true // 强制顶部横幅默认显示
        }, 'google_translate_element');
}

新增CSS样式：

/* 隐藏底部翻译选择器 */
#google_translate_element, .goog-te-gadget, .goog-te-balloon-frame {
    display: none !important;
}
/* 确保顶部横幅正常展示 */
.goog-te-banner-frame {
    display: block !important;
    visibility: visible !important;
}
/* 适配顶部横幅高度，避免页面内容被遮挡 */
body {
    top: 40px !important;
}

该配置下顶部翻译横幅会固定展示在页面顶部，支持翻译、恢复原语言操作，无底部选择入口。 #

需求2：仅显示底部翻译选项，支持重置已选语言 #

实现逻辑 #

关闭顶部横幅自动显示，新增重置语言的工具方法清空翻译状态。

完整代码 #

引入SDK代码同需求1。
初始化JS：

let translateInstance;
function googleTranslateElementInit() {
    translateInstance = new google.translate.TranslateElement(
        {
            pageLanguage: 'en',
            includedLanguages: 'ar',
            layout: google.translate.TranslateElement.InlineLayout.HORIZONTAL,
            autoDisplay: false // 关闭顶部横幅自动弹出
        }, 'google_translate_element');
}

// 重置翻译语言方法，可直接调用或绑定到自定义按钮点击事件
function resetTranslateLanguage() {
    // 清除翻译状态Cookie
    document.cookie = "googtrans=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;";
    // 刷新页面恢复原始语言，若SDK版本支持也可直接调用 translateInstance.reset() 无需刷新
    window.location.reload();
}

新增CSS样式：

/* 隐藏顶部横幅 */
.goog-te-banner-frame {
    display: none !important;
}
/* 清除顶部横幅占位 */
body {
    top: 0 !important;
}

该配置下仅会展示google_translate_element容器所在位置的翻译选择器，调用resetTranslateLanguage()即可快速重置已选语言，恢复页面原始内容。

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