0

Есть небольшой скрипт для организации мультиязычности на сайте, с переключениям на кнопках:

    var en = {
      'home': 'Home',
      'about': 'About Us',
      'contact': 'Contact Us'
    };
    var ua = {
      'home': 'Головна',
      'about': 'Про нас',
      'contact': 'Контакти'
    };

    function changeLang(lan) {
      lengthObj = Object.getOwnPropertyNames(lan).length;
      for (var i = 0; i <= lengthObj - 1; i++) {
        objKey = Object.getOwnPropertyNames(lan)[i];
        document.getElementById(objKey).innerText = func(objKey);
      }

      function func(a) {
        for (key in lan) {
          if (key == a) {
            return (lan[key]);
          }
        }
      }
    }
<header>
  <a href="/first">first</a>
  <a href="/second">second</a>
  <script type="text/javascript" src="javascripts/header.js"></script>

  <button class="translate" id="en" onclick="
    changeLang(en);
    ">English</button>
  <button class="translate" id="ua" onclick="
    changeLang(ua);
    ">Українська</button>

  <p class="lang">
    <p id="home">Home</p>
  </p>
  <p class="lang">
    <p id="about">About Us</p>
  </p>
  <p class="lang">
    <p id="contact">Contact s</p>
  </p>
</header>

Он работает хорошо, но при переходе на следующую страницу, например, контакты (и т.д.), выбранный язык не сохраняется.

Перечитал литературу и понял, что надо как-то с куками или сессиями работать, но ничего толкового не нашёл. Помогите или покажите качественную литературу. В вебе новичок.

2
  • Прочитай аномально мой ответ там все есть 8 июл 2016 в 9:05
  • @СеменихинМаксим ваша правка сломала код в вопросе и я её откатил. В этом можно было убедиться, тупо нажав "Выполнить код" и потыкав на кнопки. changeLang принимает объект, а не строку.
    – user181100
    15 июл 2016 в 21:31

3 ответа 3

2

Если ориентироваться на современные браузеры, можно в LocalStorage сохранять выбранный язык:

lang = 'ru';                        // пользователь выбрал язык
localStorage.setItem('lang', lang); // сохранили в LS

На всех страницах получение выбранного сохранённого языка:

var lang = localStorage.getItem('lang') || 'en'; // язык по умолчанию

Примерно так:

var txt = {
  en: {'home':'Home', 'about':'About Us', 'contact':'Contact Us'}
  ,ua: {'home':'Головна','about':'Про нас','contact':'Контакти'}
};
document.getElementById('e-lang-en').addEventListener('click', setLang.bind(null,'en'));
document.getElementById('e-lang-ua').addEventListener('click', setLang.bind(null,'ua'));

function setLang(lang){
  var p;
  if( !txt.hasOwnProperty(lang)) return;
  if( window.hasOwnProperty('localStorage'))
     window.localStorage.setItem('lang', lang);
  for(p in txt[lang]) {
    document.getElementById(p).innerText = txt[lang][p];
  }
}

var lang = (window.hasOwnProperty('localStorage') && window.localStorage.getItem('lang', lang)) || 'en';
setLang(lang);
<header>
  <a href="/first">first</a>
  <a href="/second">second</a>

  <button class="translate" id="e-lang-en">English</button>
  <button class="translate" id="e-lang-ua">Українська</button>

  <p class="lang">
    <p id="home">Home</p>
  </p>
  <p class="lang">
    <p id="about">About Us</p>
  </p>
  <p class="lang">
    <p id="contact">Contacts</p>
  </p>
</header>

В этой песочнице LS заблокирован. Рабочий пример на JSFiddle. По умолчанию английский язык. Поставьте украинский и перезапустите фиддл – сразу будет ua.

9
  • Интересная идея. Но , к сожелению, моих знаний, недостаточно, что б реализовать ее у себя. Не будет ли слишком нахально попросить вас осуществить такое к моей функции?
    – ItsMyLife
    8 июл 2016 в 9:04
  • Попробуйте сами, покажите, что сделали и что не получается.
    – Sergiks
    8 июл 2016 в 10:28
  • Upd. добавил рабочий пример
    – Sergiks
    8 июл 2016 в 10:56
  • Спасибо огромное.Вы спасли мою нервную сисему
    – ItsMyLife
    8 июл 2016 в 12:40
  • Блин, возникла еще одна проблема. Если же блок будет находиться на некоторой странице(например second), то на нем язык не смениться. Возможно ли это пофиксить?Добавить мб что-то?
    – ItsMyLife
    8 июл 2016 в 13:04
2

Вариантов не много.

или использовать localStorage

  • localStorage.setItem('lan', lan);
  • lang = localStorage.getItem('lann');

или предавать через Get параметр

или через cookie

function setCookie(name, value, options) {
  options = options || {};

  var expires = options.expires;

  if (typeof expires == "number" && expires) {
    var d = new Date();
    d.setTime(d.getTime() + expires * 1000);
    expires = options.expires = d;
  }
  if (expires && expires.toUTCString) {
    options.expires = expires.toUTCString();
  }

  value = encodeURIComponent(value);

  var updatedCookie = name + "=" + value;

  for (var propName in options) {
    updatedCookie += "; " + propName;
    var propValue = options[propName];
    if (propValue !== true) {
      updatedCookie += "=" + propValue;
    }
  }

  document.cookie = updatedCookie;
}



function getCookie(name) {
  var matches = document.cookie.match(new RegExp(
    "(?:^|; )" + name.replace(/([\.$?*|{}\(\)\[\]\\\/\+^])/g, '\\$1') + "=([^;]*)"
  ));
  return matches ? decodeURIComponent(matches[1]) : undefined;
}

Так или иначе тебе нужно будет при загрузки стрицы

<script>
  function ready() {
    alert( 'DOM готов' );

// changeLang(); 
// в итоге это должно быть раскоменчено
  }

  document.addEventListener("DOMContentLoaded", ready);
</script>

вызвать твою функцию что бы она загрузила нужный язык

Твою же функцию можно изменить так

function changeLang(lan){
    if('undefined'=== typeof lan )
       lan = getCookie('lan') || 'en';
    else
        setCookie('lan', lan);
//        if(!lan)
//            lan  ='en';

    lengthObj = Object.getOwnPropertyNames(lan).length;
    for (var i = 0; i <= lengthObj-1; i++) {
        objKey = Object.getOwnPropertyNames(lan)[i];
        document.getElementById(objKey).innerText=func(objKey);
    }
    function func(a){
        for(key in lan) {
            if (key == a) {
                return(lan[key]);}
        }
    }
}

если вызвать её без передачи языка он будет считан из куку

7
  • возможно я туплю, так как с js работаю всего 3 недели, но если заменить вашу функцию на мою, она не работает. Нужно мне еще что нибудь прописывать, или только изменить функцию?
    – ItsMyLife
    8 июл 2016 в 8:43
  • Не работает наверно так как там есть вызовы функций для работы с куками, ест ты их не копировал то конечно не будет работать 8 июл 2016 в 8:51
  • Да точно. Функция работает. Но проблема все та же. При переходе на след страницу все меняеться обратн.
    – ItsMyLife
    8 июл 2016 в 8:59
  • При любом действии програма записывает в куки значения lengthObj=ua; и lan=%5Bobject%20Object%5D. И почему то не работает(
    – ItsMyLife
    8 июл 2016 в 9:53
  • выложи код что у тебя получается на jsfiddle.net 8 июл 2016 в 10:37
0

Есть отличное решение jQuery плагин D2S:Lang Переводит на лету

1
  • А как им пользоваться, не покажите? Ответы состоящие из одной ссылки обычно удаляются.
    – 0xdb
    3 ноя 2018 в 16:18

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.