jQuery만으로 HTML 페이지에 기본 현지화를 추가하는 방법

5796 단어 htmljavascript

I want basic translation on my single, static HTML page but I don't want to import no complex JS lib... What do I do?



아주 간단해 내 친구



HTML 구조

<html lang="en">
  <body>
    <p lang="en">English please!</p>
    <p lang="fr">Hon hon croissant baguette!</p>
    <button type="button" lang="fr" data-toggle="lang" data-lang="en">English</button>
    <button type="button" lang="en" data-toggle="lang" data-lang="fr">Français</button>
    <script src="jquery.js"></script>
    <script src="language.js"></script>
  </body>
</html>


jQueryhere를 받으십시오. 원하지 않는다면 아래 스크립트의 바닐라 버전을 직접 만들 수 있다고 생각합니다.

JS 스크립트

$('[data-toggle="lang"]').click(function(event) {
  event.preventDefault();
  $('html').attr('lang', $(this).attr('data-lang'));
});

// auto-detect the best lang setting
const params = new URLSearchParams(window.location.search);

if (params.has('lang')) {
  $('html').attr('lang', params.get('lang'));
} else if (navigator.language.match(/^(en|fr)/)) {
  $('html').attr('lang', navigator.language.substr(0, 2))
}


그게 다야 HTML은 이제 lang 태그의 <html> 속성에 응답합니다. URL에 ?lang=fr를 추가하여 제어하거나 navigator.language로 브라우저가 결정하도록 할 수 있습니다.

즐기다!

좋은 웹페이지 즐겨찾기