Automatically translate web page

问题

How can I automatically translate my web page when I entered it.

This is my translator there is connected to my dropdown.

<script type="text/javascript">
function googleTranslateElementInit() {
  new google.translate.TranslateElement({pageLanguage: 'da', includedLanguages: 'da,de,el,en,es,fi,fr,it,ja,ko,nl,no,pl,ru,sv,uk,zh-CN,zh-TW', layout: google.translate.TranslateElement.FloatPosition.TOP_LEFT, gaTrack: true, gaId: 'UA-32978177-1'}, 'google_translate_element');
}
</script>
<script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit">
</script>

I want it to translate automatically from Danish (da) to English (en). I have read about this function:

http://www.blabla.com/#googtrans(da|en)

Where should I implement it?

回答1:

You need to create a div called google_translate_element which is mentioned in the first script like this:

<div id="google_translate_element">
Here is the Area where Google fetches the part to be translated
</div>

<script type="text/javascript">
function googleTranslateElementInit() {
  new google.translate.TranslateElement({pageLanguage: 'en', layout: google.translate.TranslateElement.FloatPosition.BOTTOM_RIGHT, multilanguagePage: true}, 'google_translate_element');
}
</script>

This second script generates a nice tiny language selection :

<script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit">
</script>

And if you wish to hide the resulting Google translation bar (first script) :

<style>
.goog-te-banner-frame.skiptranslate {
    display: none !important;
} body { top: 0px !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>

回答2:

both scripts can go in the <head> section, they will work if in the <body> tag but this can look untidy unless you put them at the end... which is not a good idea because translation options should be available before the entire page renders in the browser.

You will need to add a line to the tag in the position you want the language drop-down box to appear, eg: from the end of the existing <head> tag, this is the <div> tag that Claudio Kemp pointed out is missing in your code -

<script type="text/javascript">
function googleTranslateElementInit() {
new google.translate.TranslateElement({pageLanguage: 'da', includedLanguages: 'da,de,el,en,es,fi,fr,it,ja,ko,nl,no,pl,ru,sv,uk,zh-CN,zh-TW', 
layout: google.translate.TranslateElement.FloatPosition.TOP_LEFT, gaTrack: true, gaId: 'UA-32978177-1'}, 'google_translate_element');
 }
</script>
<script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit">
</script>
</head>
<body>
<div id="google_translate_element"></div>
</div>
<h1>My heading</h1>

The <div> code above given by [google's webmaster translation tool] (https://translate.google.com/manager/website/), there are 3 different display options which affect only the <div> code: tabbed, inline and automatic (which appears to not work) - with vertical, horizonal and drop-down display options for each. Your code uses the tabbed option.

You might want to change the code you included to translate to any language rather than just those listed, and to show the language option at the top rather than the bottom of the page so the user sees them sooner.

<div id="google_translate_element"></div>
<script type="text/javascript">function googleTranslateElementInit() {
new google.translate.TranslateElement({pageLanguage: 'da', layout: google.translate.TranslateElement.FloatPosition.TOP_RIGHT, autoDisplay: false}, 'google_translate_element');
}

回答3:

<div id="google_translate_element"></div>
<script type="text/javascript">
function googleTranslateElementInit() {
  new google.translate.TranslateElement({pageLanguage: 'ur', layout: google.translate.TranslateElement.FloatPosition.BOTTOM_RIGHT, multilanguagePage: true}, 'google_translate_element');
}
</script>
<script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>

回答4:

<div id="google_translate_element"></div>
<script type="text/javascript">
function googleTranslateElementInit() {
  new google.translate.TranslateElement({pageLanguage: 'it'}, 'google_translate_element');
}
</script>
<script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>

回答5:

<meta name="google-translate-customization" content="50cedd4c399ba41-3cc63c25c261b71e-g03cc961129fb2947-10"></meta>

<div id="google_translate_element"></div>

<script type="text/javascript">
  function googleTranslateElementInit() {
    new google.translate.TranslateElement({pageLanguage: 'en', includedLanguages: 'en', layout: google.translate.TranslateElement.FloatPosition.TOP_LEFT, multilanguagePage: true}, 'google_translate_element');
  }
</script>

<script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>

回答6:

<div id="google_translate_element"></div>
<script type="text/javascript">
  function googleTranslateElementInit() {
    new google.translate.TranslateElement({
      pageLanguage: 'en',
      layout: google.translate.TranslateElement.FloatPosition.TOP_LEFT},
      'google_translate_element'
    );
  }
</script>
<script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>

来源：https://stackoverflow.com/questions/16541760/automatically-translate-web-page

标签

javascript

php

internationalization