<script type="text/javascript">
function googleTranslateElementInit() {
new google.translate.TranslateElement(
{
pageLanguage: 'ru',
layout: google.translate.TranslateElement.FloatPosition.TOP_LEFT,
autoDisplay: true
},
'google_translate_element'
);
}
</script>
<script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
脚本会加载,但加载后不会翻译页面。我需要从选择框中选择语言。如何在不从选择框中选择语言的情况下使其自动翻译?
基本思想是,您需要添加谷歌翻译在加载元素时查找的 cookie,然后您甚至可以使用 CSS 隐藏谷歌翻译元素。
这是一个使用的简短示例js.cookie https://github.com/js-cookie/js-cookie:
<div class="custom-translate" st yle="display: none;" id="google_translate_element"></div>
<!-- ASYNCHRONOUS Google Translate -->
<script type="text/javascript">
function googleTranslateElementInit() {
new google.translate.TranslateElement({
pageLanguage: 'en',
layout: google.translate.TranslateElement.FloatPosition.TOP_RIGHT,
autoDisplay: false
}, 'google_translate_element');
}
(function () {
var googleTranslateScript = document.createElement('script');
googleTranslateScript.type = 'text/javascript';
googleTranslateScript.async = true;
googleTranslateScript.src =
'//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit';
(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(
googleTranslateScript);
})();
Cookies.set('GoogleAccountsLocale_session', 'iw', { expires: 999});
Cookies.set('googtrans', '/en/iw', { expires: 999});
</script>
CSS隐藏谷歌翻译元素:
<style>
.goog-te-banner-frame,.custom-translate {
display: none;
}
body {
top: 0 !important;
}
.goog-tooltip {
display: none !important;
}
.goog-tooltip:hover {
display: none !important;
}
.goog-text-highlight {
background-color: transparent !important;
border: none !important;
box-shadow: none !important;
}
</style>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)