Google翻译代码Chrome不可点击、Safari重复显示问题求助

算力阿峰

2026-10-18

问题修复方案

核心原因

两个故障的共同诱因基本是重复初始化翻译组件+样式/策略拦截交互，按以下步骤调整即可：

调整步骤

新增初始化防重复逻辑，避免同页面多次执行初始化函数，适配Safari的脚本回调触发规则
补充组件专属样式，解决Chrome中层级遮挡、交互被拦截的问题
如果站点使用SSR框架（Next/Nuxt等），确保这段代码仅在客户端DOM挂载完成后执行，不要在服务端渲染阶段引入

修改后完整代码

<div id="google_translate_element"></div>
<script type="text/javascript">
// 全局标记避免重复初始化
let googleTranslateInited = false;
function googleTranslateElementInit() {
  // 已初始化/容器不存在/容器已有子元素则直接跳过
  if (googleTranslateInited || !document.getElementById('google_translate_element') || document.getElementById('google_translate_element').children.length > 0) {
    return;
  }
  new google.translate.TranslateElement(
    {pageLanguage: 'no', layout: google.translate.TranslateElement.InlineLayout.SIMPLE},
    'google_translate_element'
  );
  googleTranslateInited = true;
}
</script>
<script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
<style>
/* 强制提升层级避免被遮挡 */
#google_translate_element {
  position: relative;
  z-index: 99999;
}
/* 解除全局iframe的点击拦截规则影响 */
#google_translate_element iframe {
  pointer-events: auto !important;
}
</style>