React中如何让Google翻译组件链接点击时保持target="_self"？

方法一：用MutationObserver监听DOM变化（推荐） #

既然target="_blank"是点击翻译菜单后才出现的，我们可以实时监听DOM变化，一旦发现翻译链接被修改就强制改回target="_self"：

import { useEffect } from 'react';

const YourTranslateComponent = () => {
  useEffect(() => {
    // 定位Google翻译菜单的iframe容器
    const translateIframe = document.querySelector('.goog-te-menu-frame');
    if (!translateIframe) return;

    // 等iframe加载完成后获取内部文档
    translateIframe.onload = () => {
      const translateContent = translateIframe.contentDocument.body;
      const observer = new MutationObserver((mutations) => {
        mutations.forEach(mutation => {
          // 处理属性变化：把被改成_blank的target改回_self
          if (mutation.type === 'attributes' && mutation.attributeName === 'target') {
            const link = mutation.target;
            if (link.tagName === 'A' && link.target === '_blank') {
              link.target = '_self';
            }
          }
          // 处理新增节点：给新生成的翻译链接直接设置target="_self"
          if (mutation.type === 'childList') {
            mutation.addedNodes.forEach(node => {
              if (node.tagName === 'A') {
                node.target = '_self';
              } else if (node.querySelectorAll) {
                node.querySelectorAll('a').forEach(link => link.target = '_self');
              }
            });
          }
        });
      });

      // 启动监听，覆盖子节点和属性变化
      observer.observe(translateContent, {
        attributes: true,
        childList: true,
        subtree: true,
        attributeFilter: ['target']
      });

      // 组件卸载时停止监听
      return () => observer.disconnect();
    };
  }, []);

  // 这里放你的Google翻译组件代码
  return <div className="your-translate-container">{/* Google翻译元素 */}</div>;
};

export default YourTranslateComponent;

方法二：拦截点击事件，强制当前页跳转 #

如果监听DOM太繁琐，可以直接给翻译菜单内的链接绑定点击事件，手动控制跳转行为：

import { useEffect } from 'react';

const YourTranslateComponent = () => {
  useEffect(() => {
    const handleLinkClick = (e) => {
      const targetLink = e.target.closest('a');
      // 只处理翻译相关的跳转链接
      if (targetLink && targetLink.href.includes('translate.google.com') && targetLink.target === '_blank') {
        e.preventDefault();
        window.location.href = targetLink.href;
      }
    };

    const translateIframe = document.querySelector('.goog-te-menu-frame');
    if (translateIframe) {
      translateIframe.onload = () => {
        translateIframe.contentDocument.body.addEventListener('click', handleLinkClick);
      };
    }

    // 清理事件监听
    return () => {
      if (translateIframe?.contentDocument) {
        translateIframe.contentDocument.body.removeEventListener('click', handleLinkClick);
      }
    };
  }, []);

  return <div className="your-translate-container">{/* Google翻译元素 */}</div>;
};

export default YourTranslateComponent;

方法三：全局拦截target修改（极端情况） #

如果完全找不到是哪个脚本在修改target，可以全局监听所有a标签的属性变化，只修正翻译相关的链接：

import { useEffect } from 'react';

const YourApp = () => {
  useEffect(() => {
    const observer = new MutationObserver((mutations) => {
      mutations.forEach(mutation => {
        if (mutation.type === 'attributes' && mutation.attributeName === 'target') {
          const link = mutation.target;
          if (link.tagName === 'A' && link.href.includes('translate.google.com') && link.target === '_blank') {
            link.target = '_self';
          }
        }
      });
    });

    observer.observe(document.body, {
      attributes: true,
      subtree: true,
      attributeFilter: ['target']
    });

    return () => observer.disconnect();
  }, []);

  return <div className="app-container">{/* 你的应用内容 */}</div>;
};

export default YourApp;

注意事项 #

• 要确保代码在Google翻译组件初始化完成后执行，所以用useEffect空依赖数组或者类组件的componentDidMount生命周期。
• Google翻译的DOM结构可能会更新，遇到问题时可以用浏览器开发者工具重新定位容器选择器。

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