修改google.translate.TranslateElement结果中的元素

我正在尝试将非常方便的Google Translate翻译元素嵌入到网页中，这非常简单且效果很好，但我需要更改生成的HTML中显示的默认文本：

在此处输入图像描述

与许多Google API和js库合作后，我认为这没有问题，因为它几乎可以肯定是可配置的，但是看了一段时间后我找不到任何对你设置的属性的引用，以及一般来说，文件似乎很可怜。 基本代码是： 

  function googleTranslateElementInit() { var translator = new google.translate.TranslateElement({ pageLanguage: 'en', autoDisplay: false, multilanguagePage: false, layout: google.translate.TranslateElement.InlineLayout.SIMPLE }, 'google_translate_element'); }

由于在我创建translator时能够将其设置为属性而onDOMNodeInserted ，我决定破解它并使用onDOMNodeInserted侦听器，只需将生成的HTML更改为

。 我在这里使用jQuery，所以我的代码是： 

 $(document).ready(function(){ $('#google_translate_element').bind('DOMNodeInserted', function(event) { $('.goog-te-menu-value span:first').html('Translate'); }); })

这里的事情变得有趣。 Chrome可以完美地加载所有内容，并且可以很好地替换innerHTML。 Internet Explorer（8）完全忽略DOMNodeInserted侦听器，并且页面加载就好像从未调用过jQuery函数一样。 Firefox（10）似乎加载正常（但根本没有翻译元素），然后冻结，开始吞噬内存，崩溃。

关于如何让这个innerHTML替换工作的任何想法？ 如果您知道displayLabel : "Translate"的属性当然是首选，但除非（并且一个非常难看的setTimeout hack）有什么方法可以displayLabel : "Translate"工作吗？

和你一样，我无法找到如何通过init params自定义小工具，但似乎可以在HTML中编写自己的自定义小工具，然后在其上调用g.translatefunction。 见http://www.toronto.ca/ （页脚）。 我担心你将不得不做更多的挖掘，看看它是如何完成的。

这里也引用了g.translate的这种用法。 不幸的是，现在讨论已经很久了，但希望仍然有用。

我正在使用此代码，如果翻译模块已加载到页面中，则每3ms检查一次; 如果是这样，它然后更新文本并清除之后的间隔检查。 

 function cleartimer() { setTimeout(function(){ window.clearInterval(myVar); }, 1000); } function myTimer() { if ($('.goog-te-menu-value > span:first-child').length) { $('.goog-te-menu-value > span:first-child').html('Translate'); cleartimer(); } } var myVar = setInterval(function(){ myTimer() }, 300);

您可以使用CSS执行此操作，只有在选择语言时才会更改标签。 

 #google_translate_element .goog-te-gadget-simple .goog-te-menu-value span:first-child{display: none;} #google_translate_element .goog-te-gadget-simple .goog-te-menu-value:before{content: 'Translate'}
Interesting Posts