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

时间:2012-02-16 05:26:04

标签: javascript jquery google-translate dom-node

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

enter image description here

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

<div id="google_translate_element"></div>
<script>
   function googleTranslateElementInit() {
      var translator = new google.translate.TranslateElement({
      pageLanguage: 'en',
      autoDisplay: false,
      multilanguagePage: false,
      layout: google.translate.TranslateElement.InlineLayout.SIMPLE
   }, 'google_translate_element');
}
</script>
<script src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>

在我创建translator的时候,我已经决定破解它并使用onDOMNodeInserted侦听器只是在加载后更改生成的HTML进入<div id="google_translate_element"></div>。我在这里使用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)有什么方法可以让它工作吗?

3 个答案:

答案 0 :(得分:2)

与您一样,我无法通过init参数找到如何自定义小工具,但似乎可以在HTML中编写您自己的自定义小工具,然后在其上调用g.translate功能。请参阅http://www.toronto.ca/(页脚)。我担心你将不得不做更多的挖掘,看看它是如何完成的。

g.translate的这种使用也被引用here。不幸的是,讨论现在已经很久了,但希望仍然相关。

答案 1 :(得分:1)

您可以使用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'}

答案 2 :(得分:0)

我使用此代码,如果翻译模块已加载到页面中,则每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);