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

问题描述

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

I'm attempting to embed the very convenient Google Translate translate element into a webpage, which is super simple and works great, but I need to change the default text that displays in the resulting HTML:

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

Having worked with a number of Google APIsand js libraries, I figured this would be no problem as it would almost certainly be configurable, but having looked around for some time I can't find any reference to a property that let's you set this, and documentation in general seems to be pitiful. The basic code is:

<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>

在我创建<$ c $时，将其设置为属性是不相称的c>翻译器，我决定破解它并使用 onDOMNodeInserted 监听器，只要在加载到< div id =google_translate_element>< / div> 。我在这里使用jQuery，所以我的代码是：

Having dispaired of being able to set this as a property in the when I create the translator, I decided to hack it and use an onDOMNodeInserted listener to just change the resulting HTML once it had loaded into <div id="google_translate_element"></div>. I'm using jQuery here, so my code is:

$(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）似乎加载正常（但根本没有翻译元素），然后冻结，开始吞噬内存，并崩溃。

And here's where things get interesting. Chrome loads everything perfectly and does the innerHTML substitution beautifully. Internet Explorer (8) ignores the DOMNodeInserted listener altogether and the page loads as if the jQuery function was never called. Firefox (10) appears to load fine (but with no translate element at all) and then freezes, begins gobbling up memory, and crashes.

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

Any thoughts on how I can get this innerHTML substitution to work? If you're aware of a displayLabel : "Translate"-like property that is of course preferred, but barring that (and a really ugly setTimeout hack) is there any way I can get this to work?

推荐答案

像我一样我不能了解如何通过init params自定义小工具，但似乎可以在HTML中编写自己的自定义小工具，然后在其上调用g.translate功能。请参见（页脚）。我担心你不得不再做一些挖掘才能看到它是如何完成的。

Like you I can't find out how to customize the gadget via init params but it appears possible to write your own customized gadget in HTML then invoke g.translate functionality on it. See http://www.toronto.ca/ (page footer). I'm afraid you will have to do some more digging to see exactly how it's done.

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

This use of g.translate is also referenced here. Unfortunately the discussion is quite old now but hopefully still relevant.

这篇关于修改google.translate.TranslateElement结果中的元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！