JS.22 ページを多言語に対応する。

2020-11-12(Thu) | tags: tips

国旗のマークを押すと、対応する言語に翻訳されます。

コード

html

<div class="frame" style="text-align: center">
  <a href="#googtrans(ja|en)" class="lang-select" data-lang="en">🇺🇸</a>
  <a href="#googtrans(ja|zh-CN)" class="lang-select" data-lang="zh-CN">🇨🇳</a>
  <a href="#googtrans(ja|es)" class="lang-select" data-lang="es">🇲🇽</a>
  <a href="#googtrans(ja|fr)" class="lang-select" data-lang="fr">🇫🇷</a>
  <a href="#googtrans(ja|ja)" class="lang-select" data-lang="ja">🇯🇵</a>
  <h1 style="text-decoration: underline solid red; font-size: 3em;">こんにちは</h1>
</div>

js

<script src="https://translate.google.com/translate_a/element.js?cb=googleTranslateElementInit" type="text/javascript" ></script>
<script src="https://iwasakishuto.github.io/js/jquery.js" type="text/javascript"></script>
<script>
  $('.lang-select').click(function() {
    var lang = $(this).attr('data-lang');
    window.location = $(this).attr('href');
    location.reload();
  });
  function googleTranslateElementInit() {
    new google.translate.TranslateElement({
      pageLanguage: 'ja',
      layout: google.translate.TranslateElement.FloatPosition.TOP_LEFT
    }, 'google_translate_element');
  }
</script>
other contents
social