Google Translate Element移动端失效及显示异常问题求助

问题背景 #

使用Google翻译官方脚本实现英文转阿拉伯语翻译功能，电脑端运行正常，但移动端失效。为解决移动端问题，手动添加自定义翻译选择框代码后，出现以下异常：

• 保留移动端代码时，两端功能均异常
• 注释移动端代码后，移动端出现两个可工作的选择框，但电脑端失效

原核心脚本代码：

<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',
    includedLanguages: 'ar,xx,yy,en',
    layout: google.translate.TranslateElement.InlineLayout.SIMPLE
  }, 'google_translate_element');
}
</script>

手动添加的移动端冲突代码：

<!-- laptop view-->
<div id="google_translate_element" class="trans" style="padding:0px;"></div> 

<!-- mob view-->
<div id="google_translate_element" style="padding:0px;">
  <div class="skiptranslate goog-te-gadget" dir="ltr">
    <div id=":0.targetLanguage">
      <select class="goog-te-combo" aria-label="Language Translate Widget" style="padding: 5px;background: azure;font-size: 15px;border-radius: 10px;font-weight: 700 !important;">
        <option value="">Select Language</option>
        <option value="ar">Arabic</option>
      </select>
    </div>
  </div>
</div>

核心问题 #

1. 重复ID冲突：DOM中存在两个google_translate_element容器，Google翻译脚本仅绑定第一个匹配元素，导致两端功能互斥。
2. 无效UI模拟：手动编写的移动端选择框未与Google翻译核心API绑定，仅为UI复刻，无法触发实际翻译逻辑。

修复方案 #

方案1：响应式CSS控制单容器（推荐） #

仅保留一个翻译容器，通过媒体查询适配两端样式，彻底避免ID冲突：

<!-- 唯一翻译容器 -->
<div id="google_translate_element" class="trans"></div>

<!-- 响应式样式 -->
<style>
/* 电脑端样式 */
@media (min-width: 768px) {
  .trans {
    padding: 0;
  }
}
/* 移动端样式 */
@media (max-width: 767px) {
  .goog-te-combo {
    padding: 5px;
    background: azure;
    font-size: 15px;
    border-radius: 10px;
    font-weight: 700 !important;
  }
}
</style>

<!-- 优化后的翻译脚本 -->
<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',
    includedLanguages: 'ar,en', // 移除无效的xx、yy语言码
    layout: google.translate.TranslateElement.InlineLayout.SIMPLE
  }, 'google_translate_element');
}
</script>

方案2：JS动态创建容器（复杂场景适配） #

通过JS判断设备类型，动态生成唯一容器，确保脚本绑定正常：

<script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
<script type="text/javascript">
function googleTranslateElementInit() {
  const isMobile = window.innerWidth <= 767;
  // 创建唯一翻译容器
  const container = document.createElement('div');
  container.id = 'google_translate_element';
  container.style.padding = '0';
  // 将容器插入页面指定位置（示例：body末尾）
  document.body.appendChild(container);

  // 初始化翻译组件
  new google.translate.TranslateElement({
    pageLanguage: 'en',
    includedLanguages: 'ar,en',
    layout: google.translate.TranslateElement.InlineLayout.SIMPLE
  }, 'google_translate_element');

  // 移动端自定义样式（延迟等待组件加载）
  if (isMobile) {
    setTimeout(() => {
      const combo = document.querySelector('.goog-te-combo');
      if (combo) {
        Object.assign(combo.style, {
          padding: '5px',
          background: 'azure',
          fontSize: '15px',
          borderRadius: '10px',
          fontWeight: '700'
        });
      }
    }, 100);
  }
}
</script>

关键注意事项 #

• 始终保证DOM中仅存在一个google_translate_element id，ID唯一性是脚本正常绑定的前提。
• 移除无效语言码（如原代码中的xx、yy），避免组件加载异常。
• 不要手动模拟翻译选择框，应通过CSS修改官方组件样式，确保与翻译API正常联动。

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