添加Google Translate后无法编辑SharePoint页面，寻求技术解决方案

添加Google Translate后，无法编辑SharePoint页面，且出现错误（错误截图：）

以下是SPFx React Web Part中使用googleTranslateElement的代码片段：

const initializeLanguageTranslateElement = async () => {
    const addScript = document.createElement('script');
    addScript.setAttribute(
      'src',
      '//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit'
    );
    document.body.appendChild(addScript);
    window["googleTranslateElementInit"] = await languageTranslateElementInit;
  }
const languageTranslateElementInit = async () => {
    new window["google"].translate.TranslateElement(
      {
        defaultLanguage: 'en',
        includedLanguages: 'en,fr,de,ja,es,ar,ru,zh-CN',
      },
      'google_language_translate_element'
    );
    await onChangeLanguageTranslation();
  };
 
const onChangeLanguageTranslation = () => {
    setTimeout(async () => {
      const languageDropdown = await document.querySelector('.goog-te-combo');
      if (languageDropdown) {
        languageDropdown["value"] = 'en';
        languageDropdown.addEventListener('change', () => {
          const selectedLanguageValue = languageDropdown["value"];
          // Translate the page immediately after changing the language
          window["google"].translate.TranslateElement({ pageLanguage: selectedLanguageValue }, 'google_language_translate_element');
        });
        languageDropdown.dispatchEvent(new Event("change"));
      }
    }, 1000);
  }

<div id="google_language_translate_element"></div>

核心问题 #

Google Translate脚本会全局修改DOM结构（添加iframe、重写元素属性），直接破坏SharePoint编辑模式的内部组件逻辑；同时代码存在模式未区分、重复创建实例、异步逻辑滥用等问题。

具体修复步骤 #

1. 区分页面模式，仅在浏览模式加载翻译
   利用SPFx的DisplayMode判断当前页面状态，只在非编辑模式初始化翻译：

import { DisplayMode } from '@microsoft/sp-core-library';

// 在React组件中引入状态管理模式
const [displayMode, setDisplayMode] = useState<DisplayMode>(DisplayMode.Read);

useEffect(() => {
  if (displayMode === DisplayMode.Read) {
    initializeLanguageTranslateElement();
  } else {
    cleanUpGoogleTranslate();
  }
}, [displayMode]);

2. 修复翻译初始化逻辑，避免重复实例
   移除重复创建TranslateElement的代码，优化全局函数赋值和异步逻辑：

const initializeLanguageTranslateElement = () => {
  // 避免重复注入脚本
  if (document.querySelector('script[src*="translate.google.com/translate_a/element.js"]')) return;
  
  const addScript = document.createElement('script');
  addScript.src = '//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit';
  document.body.appendChild(addScript);
  
  window.googleTranslateElementInit = languageTranslateElementInit;
}

const languageTranslateElementInit = () => {
  if (!window.google?.translate) return;
  
  new window.google.translate.TranslateElement(
    {
      defaultLanguage: 'en',
      includedLanguages: 'en,fr,de,ja,es,ar,ru,zh-CN',
      autoDisplay: false
    },
    'google_language_translate_element'
  );
  
  onChangeLanguageTranslation();
};

const onChangeLanguageTranslation = () => {
  setTimeout(() => {
    const languageDropdown = document.querySelector('.goog-te-combo') as HTMLSelectElement;
    if (languageDropdown) {
      languageDropdown.value = 'en';
      languageDropdown.addEventListener('change', (e) => {
        const selectedLang = (e.target as HTMLSelectElement).value;
        // 谷歌翻译会自动处理页面翻译，无需重新创建实例
      });
      languageDropdown.dispatchEvent(new Event('change'));
    }
  }, 1000);
}

3. 编辑模式下清理翻译残留
   在编辑模式移除谷歌翻译生成的DOM和全局变量，避免干扰编辑逻辑：

const cleanUpGoogleTranslate = () => {
  // 清空翻译容器
  const translateContainer = document.getElementById('google_language_translate_element');
  if (translateContainer) translateContainer.innerHTML = '';
  
  // 删除谷歌翻译添加的全局元素
  document.querySelectorAll('[class^="goog-te-"], [id^="google_translate"]').forEach(el => el.remove());
  
  // 清除全局变量
  delete window.googleTranslateElementInit;
  delete window.google?.translate;
}

额外建议 #

• 将翻译脚本注入到WebPart容器内，减少对全局页面的影响
• 优先考虑SharePoint原生多语言功能，兼容性远优于第三方翻译工具

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