目前，我正在使用此处提供的简单 Google 翻译下拉菜单：http : //translate.google.com/translate_tools
我还希望能够点击我拥有的一些标志图标并触发由谷歌翻译小部件中基于文本的链接调用的相同 javascript 调用。
任何人都有关于如何实现这一目标的想法？我不知道如何让点击标志启动与点击谷歌翻译文本链接相同的行为。
使用自定义标志图标实现 Google 翻译
IT技术
javascript
google-translate
2021-03-02 10:35:47
6个回答
找到这个问题的解决方案很有趣！
<!-- Use CSS to replace link text with flag icons -->
<ul class="translation-links">
<li><a href="#" class="spanish" data-lang="Spanish">Spanish</a></li>
<li><a href="#" class="german" data-lang="German">German</a></li>
</ul>
<!-- Code provided by Google -->
<div id="google_translate_element"></div>
<script type="text/javascript">
function googleTranslateElementInit() {
new google.translate.TranslateElement({pageLanguage: 'en', layout: google.translate.TranslateElement.InlineLayout.SIMPLE, autoDisplay: false}, 'google_translate_element');
}
</script>
<script src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit" type="text/javascript"></script>
<!-- Flag click handler -->
<script type="text/javascript">
$('.translation-links a').click(function() {
var lang = $(this).data('lang');
var $frame = $('.goog-te-menu-frame:first');
if (!$frame.size()) {
alert("Error: Could not find Google translate frame.");
return false;
}
$frame.contents().find('.goog-te-menu2-item span.text:contains('+lang+')').get(0).click();
return false;
});
</script>
@mogelbrod 代码并不总是有效，所以我对其进行了一些修改。
如果用户登录 Google 帐户，Google 将检测其语言并自动翻译语言文本，因此您将无法在所需元素上触发事件，因为 data-lang 属性将不正确！
未登录 Google 帐户的用户和美国/英语用户将拥有此权限。
例如; 克罗地亚用户将拥有此功能。
在这种情况下，最好映射语言顺序。例如从上面，那将是
0 - 英语
1 - 法语
2 - 德语
3 - 意大利语
HTML：
请注意 data-placement 属性（您可以更改元素顺序，但保留上述位置）。
<div class="translation-icons" style="visibility:hidden">
<a href="#" class="eng" data-placement="0">eng icon</a>
<a href="#" class="fra" data-placement="1">fra icon</a>
<a href="#" class="ger" data-placement="2">ger icon</a>
<a href="#" class="ita" data-placement="3">ita icon</a>
</div>
JS：我不得不改变查找选择器。请注意，当用户选择语言时，#google_translate_element div 中不再有“选择语言”元素，因此我也必须处理它。
在加载所有脚本（谷歌翻译）之前不要显示图标也很好。
$(window).load(function () {
$('.translation-icons').css('visibility', 'visible');
$('.translation-icons a').click(function(e) {
e.preventDefault();
var placement = $(this).data('placement');
var lang_num = $('.translation-icons a').length;
var $frame = $('.goog-te-menu-frame:first');
if (!$frame.size()) {
alert("Error: Could not find Google translate frame.");
return false;
}
var langs = $('.goog-te-menu-frame:first').contents().find('a span.text');
if(langs.length != lang_num) placement = placement+1;
langs.eq(placement).click();
return false;
});
});
@mogelbrod，我在上面使用了你的代码，它在 Chrome 上运行良好，在 Firefox 和 Safari 上尝试过，没有奏效。span.click 事件不会触发谷歌翻译的事件处理程序。
我想出了另一种方法，我只想通过使用 google select 而不是基于 iframe 的插件来分享。
<!-- Use CSS to replace link text with flag icons -->
<ul class="translation-links">
<li><a href="#" class="spanish" data-lang="Spanish">Spanish</a></li>
<li><a href="#" class="german" data-lang="German">German</a></li>
</ul>
<!-- Code provided by Google -->
<div id="google_translate_element"></div>
<script type="text/javascript">
function googleTranslateElementInit() {
new google.translate.TranslateElement({pageLanguage: 'en', autoDisplay: false}, 'google_translate_element'); //remove the layout
}
</script>
<script src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit" type="text/javascript"></script>
<script type="text/javascript">
function triggerHtmlEvent(element, eventName) {
var event;
if(document.createEvent) {
event = document.createEvent('HTMLEvents');
event.initEvent(eventName, true, true);
element.dispatchEvent(event);
} else {
event = document.createEventObject();
event.eventType = eventName;
element.fireEvent('on' + event.eventType, event);
}
}
<!-- Flag click handler -->
$('.translation-links a').click(function(e) {
e.preventDefault();
var lang = $(this).data('lang');
$('#google_translate_element select option').each(function(){
if($(this).text().indexOf(lang) > -1) {
$(this).parent().val($(this).val());
var container = document.getElementById('google_translate_element');
var select = container.getElementsByTagName('select')[0];
triggerHtmlEvent(select, 'change');
}
});
});
</script>
测试: Chrome (win & Mac), Safari (Win & Mac), FireFox (win) 和 IE8
顺便说一下，我在Firefox和Safari上遇到的span.click事件问题，可以通过上面的triggerHtmlEvent函数解决，不过我没试过。
现在不需要脚本了！
将标签添加#googtrans(TO_LANG_CODE)到您各自的标志链接到的地址。
这TO_LANG_CODE是您想要的语言的语言代码。这假设该页面使用问题中的 Google 网站翻译器，并且可以自动识别您的原始语言。
识别原始语言有助于避免错误，为此请使用表格#googtrans(FROM_LANG_CODE|TO_LANG_CODE)。
示例：
http : //nykopingsguiden.se/#googtrans(se|es)将瑞典语页面
http://nykopingsguiden.se从瑞典语翻译成西班牙语。
使用自定义标志图标实现 Google 翻译
参考这个链接
这个自定义列表的好处是我们可以隐藏谷歌翻译小部件并使用所有语言来翻译网页。
<div id="google_translate_element" style="display: none">
</div>
<script type="text/javascript">
function googleTranslateElementInit() {
new google.translate.TranslateElement({ pageLanguage: 'en', layout: google.translate.TranslateElement.InlineLayout.SIMPLE, autoDisplay: false }, 'google_translate_element');
}
</script>
<script src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"
type="text/javascript"></script>
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script>
function translate(lang) {
var $frame = $('.goog-te-menu-frame:first');
if (!$frame.size()) {
alert("Error: Could not find Google translate frame.");
return false;
}
$frame.contents().find('.goog-te-menu2-item span.text:contains(' + lang + ')').get(0).click();
return false;
}
</script>