javascript 从 google.translate.TranslateElement 结果修改元素
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9306015/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Modifying element from google.translate.TranslateElement results
提问by Ben D
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 Translate 翻译元素嵌入到网页中，这非常简单且效果很好，但我需要更改结果 HTML 中显示的默认文本：
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:
使用过许多 Google APIs 和 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>
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 onDOMNodeInsertedlistener 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:
已经dispaired的能够设置出这是当我创建了一个属性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');
});
})
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.
这就是事情变得有趣的地方。Chrome 完美地加载了所有内容，并完美地进行了innerHTML 替换。Internet Explorer (8) 完全忽略了 DOMNodeInserted 侦听器，并且页面加载时就像从未调用过 jQuery 函数一样。Firefox (10) 似乎加载良好（但根本没有翻译元素）然后冻结，开始吞噬内存，然后崩溃。
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 setTimeouthack) is there any way I can get this to work?
关于如何让这个innerHTML 替换起作用的任何想法？如果你知道一个类似displayLabel : "Translate"的属性当然是首选的，但除非那个（和一个非常丑陋的setTimeout黑客），我有什么办法可以让它工作？
采纳答案by Beetroot-Beetroot
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.
像您一样，我不知道如何通过 init params 自定义小工具，但似乎可以用 HTML 编写您自己的自定义小工具，然后在其上调用 g.translate 功能。请参阅http://www.toronto.ca/（页脚）。恐怕您将不得不进行更多挖掘才能确切了解它是如何完成的。
This use of g.translate is also referenced here. Unfortunately the discussion is quite old now but hopefully still relevant.
此处也引用了 g.translate 的这种用法。不幸的是，讨论现在已经很老了，但希望仍然相关。
回答by Loved
I'm using this code which checks every 3ms if the translate module has been yet loaded into the page; if so, it then updates the text and clears the interval check after.
如果翻译模块尚未加载到页面中，我正在使用此代码每 3 毫秒检查一次；如果是这样，它然后更新文本并清除间隔检查之后。
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);
回答by user2428593
You can do it using CSS, only it will not change the label when a language is selected.
您可以使用 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'}