Firefox中Google Translate插件报错Uncaught DOMException求助

问题定位 #

你遇到的Uncaught DOMException: An invalid or illegal string was specified错误，结合Chrome正常、Firefox异常的现象，主要由语法兼容性、DOM元素状态、浏览器隐私设置这几类原因导致。

修复步骤 #

1. 修正JavaScript配置的语法错误 #

Firefox对对象字面量末尾的多余逗号兼容性更严格，你的配置中autoDisplay: false,后面的逗号需要删除：

function googleTranslateElementInit() {
    new google.translate.TranslateElement({
      pageLanguage: 'pl',
      layout: google.translate.TranslateElement.InlineLayout.HORIZONTAL,
      autoDisplay: false  // 移除末尾多余的逗号
    },
    'google_translate_element');
}

2. 调整元素初始显示状态 #

一开始将google_translate_element设为display: none会导致Firefox下Google Translate无法正确初始化DOM元素，建议先移除该样式，若需要隐藏翻译控件，可在初始化完成后再通过JS控制：

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

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

初始化后隐藏控件的示例：

function googleTranslateElementInit() {
    const translateElement = new google.translate.TranslateElement({
      pageLanguage: 'pl',
      layout: google.translate.TranslateElement.InlineLayout.HORIZONTAL,
      autoDisplay: false
    },
    'google_translate_element');
    // 初始化完成后隐藏控件
    document.getElementById('google_translate_element').style.display = 'none';
}

3. 检查Firefox隐私设置 #

Firefox默认的跟踪保护可能会拦截Google Translate的资源：

• 打开Firefox设置，进入「隐私与安全」
• 找到「增强跟踪保护」，临时关闭或把你的网站及translate.googleapis.com加入例外列表

4. 确认脚本加载时序 #

确保googleTranslateElementInit函数在Google Translate脚本加载前定义，避免因函数未找到导致的初始化失败。建议将函数定义放在脚本引入之前：

<script type="text/javascript">
function googleTranslateElementInit() {
    // 修正后的初始化代码
}
</script>
<script type="text/javascript" src="https://translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
<div id="google_translate_element"></div>

补充说明 #

你提到W3Schools的示例在Firefox也无法运行，这大概率是Firefox的跟踪保护拦截了相关资源，按照步骤3调整设置后即可验证。

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