如何将谷歌翻译下拉列表的“Select Language”文本修改为“Language”

要替换谷歌翻译下拉框里的“Select Language”为“Language”，你原来的方法存在两个核心问题：一是谷歌翻译的iframe是动态加载的，点击事件触发时iframe内容可能还没完全渲染；二是跨域iframe的内容访问需要等待iframe加载完成后再操作。

下面是两种可行的解决方案：

方案一：使用MutationObserver监听iframe加载 #

通过监听DOM变化，等待谷歌翻译的iframe生成并加载完成后，再修改文本：

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

<script type="text/javascript">
    function googleTranslateElementInit() {
        new google.translate.TranslateElement(
            {
                pageLanguage: 'en',
                autoDisplay: 'true',
                layout: google.translate.TranslateElement.InlineLayout.HORIZONTAL
            }, 'google_translate_element');
    }
</script>

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

<script>
// 监听谷歌翻译容器的DOM变化，等待iframe出现
const observer = new MutationObserver((mutations) => {
    mutations.forEach((mutation) => {
        if (mutation.addedNodes.length) {
            const iframe = document.querySelector('#google_translate_element iframe');
            if (iframe) {
                // 等待iframe加载完成
                iframe.onload = function() {
                    try {
                        // 定位下拉按钮的默认文本元素
                        const selectText = iframe.contentDocument.querySelector('.goog-te-menu-value span');
                        if (selectText && selectText.textContent === 'Select Language') {
                            selectText.textContent = 'Language';
                        }
                        // 同时修改下拉列表的标题文本
                        const dropdownTitle = iframe.contentDocument.querySelector('.goog-te-menu-header .text');
                        if (dropdownTitle && dropdownTitle.textContent === 'Select Language') {
                            dropdownTitle.textContent = 'Language';
                        }
                    } catch (e) {
                        // 跨域异常忽略，此时可切换方案二
                    }
                };
                observer.disconnect(); // 完成修改后停止监听
            }
        }
    });
});

observer.observe(document.getElementById('google_translate_element'), { childList: true, subtree: true });
</script>

方案二：定时检查元素（兼容跨域限制场景） #

如果浏览器的同源策略阻止了直接访问iframe内容，可以通过定时检查页面上的谷歌翻译下拉按钮文本，直接修改：

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

<script type="text/javascript">
    function googleTranslateElementInit() {
        new google.translate.TranslateElement(
            {
                pageLanguage: 'en',
                autoDisplay: 'true',
                layout: google.translate.TranslateElement.InlineLayout.HORIZONTAL
            }, 'google_translate_element');
    }
</script>

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

<script>
// 定时检查并修改文本
function updateTranslateText() {
    const translateButton = document.querySelector('#google_translate_element .goog-te-menu-value span');
    if (translateButton && translateButton.textContent.trim() === 'Select Language') {
        translateButton.textContent = 'Language';
        clearInterval(checkInterval); // 修改完成后停止定时检查
    }
}

// 每500毫秒检查一次，直到修改完成
const checkInterval = setInterval(updateTranslateText, 500);
</script>

注意事项 #

• 谷歌翻译的DOM结构可能会随时更新，若上述选择器失效，需要通过浏览器开发者工具重新定位元素的类名或选择器。
• 部分浏览器的严格同源策略可能会阻止访问iframe内部内容，此时方案二的兼容性更好。

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