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

Ben*_*n D 5 javascript jquery google-translate dom-node

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

在此输入图像描述

使用过许多 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>
Run Code Online (Sandbox Code Playgroud)

当我创建 时,我对能够将其设置为属性感到失望translator,因此我决定破解它并使用onDOMNodeInserted侦听器在加载到<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');
   });
})
Run Code Online (Sandbox Code Playgroud)

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

关于如何让这个innerHTML替换工作有什么想法吗?如果你知道displayLabel : "Translate"类似的属性当然是首选,但除非它(以及一个非常丑陋的setTimeout黑客),我有什么办法可以让它工作吗?

Bee*_*oot 2

和您一样,我不知道如何通过 init params 自定义小工具,但似乎可以用 HTML 编写您自己的自定义小工具,然后在其上调用 g.translate 功能。请参阅http://www.toronto.ca/(页脚)。恐怕你需要做更多的挖掘才能确切地了解它是如何完成的。

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