如何实现点击按钮直接将网站翻译成西班牙语（谷歌翻译）

步骤1：隐藏默认翻译选择器 #

给谷歌翻译的容器添加隐藏样式，避免显示默认的下拉选择框：

<div id="google_translate_element" style="display:none;"></div>

步骤2：编写触发翻译的函数 #

保留初始化翻译组件的逻辑，新增一个直接触发西班牙语翻译的函数：

function googleTranslateElementInit() {
  new google.translate.TranslateElement({
    pageLanguage: 'en',
    includedLanguages: 'es',
    layout: google.translate.TranslateElement.InlineLayout.SIMPLE,
    autoDisplay: false
  }, 'google_translate_element');
}

// 触发西班牙语翻译的核心函数
function translateToSpanish() {
  const languageSelector = document.querySelector('.goog-te-combo');
  if (languageSelector) {
    languageSelector.value = 'es';
    // 触发选择事件，触发页面翻译
    languageSelector.dispatchEvent(new Event('change'));
  }
}

步骤3：修改按钮绑定新函数 #

将按钮的点击事件改为调用上面的翻译触发函数：

<button type="button" class="button" id="clickMe" onclick="translateToSpanish()">Español</button>

完整可运行代码 #

<div id="google_translate_element" style="display:none;"></div>

<script type="text/javascript">
function googleTranslateElementInit() {
  new google.translate.TranslateElement({
    pageLanguage: 'en',
    includedLanguages: 'es',
    layout: google.translate.TranslateElement.InlineLayout.SIMPLE,
    autoDisplay: false
  }, 'google_translate_element');
}

function translateToSpanish() {
  const languageSelector = document.querySelector('.goog-te-combo');
  if (languageSelector) {
    languageSelector.value = 'es';
    languageSelector.dispatchEvent(new Event('change'));
  }
}
</script>

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

<button type="button" class="button" id="clickMe" onclick="translateToSpanish()">Español</button>

说明 #

原代码中调用googleTranslateElementInit()仅能初始化翻译组件，无法直接触发翻译动作，重复调用还会生成重复组件。通过查找谷歌翻译自动生成的语言选择器，模拟选择西班牙语并触发变更事件，即可实现点击按钮直接翻译的效果。

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