Умный переключатель языков

Обычно переключение языков на сайте сделано обычными ссылками вида |ru|en|cn|, которое никак не отслеживает на какой странице пользователь решил поменять язык, и просто переходит на главную страницу сайта с другим языком.

Попробуем сделать интелектуальный переключатель языков, который бы отслеживал, где в данный момент находится пользователь, чтобы перенаправить его на ту же страницу, но на выбранном языке.

Разметка HTML-кода:


<ul>
    <li><a onclick="return switch_language('ru', 'ru')" href="/ru/">ru</a></li>
    <li><a onclick="return switch_language('ru', 'en')" href="/en/">en</a></li>
    <li><a onclick="return switch_language('ru', 'cn')" href="/cn/">cn</a></li>
</ul>

Первый параметр в функции — текущий язык, у меня он определяется в РНР-коде и вставляется в шаблон. Как понятно из примера — это вариант, когда текущий язык — русский(ru).

Java Script код:



// Аналог РНР-функции str_replace
function str_replace ( search, replace, subject ) {

if(!(replace instanceof Array)){
replace=new Array(replace);
if(search instanceof Array){
while(search.length>replace.length){
replace[replace.length]=replace[0];
}
}
}

if(!(search instanceof Array))search=new Array(search);
while(search.length>replace.length){
replace[replace.length]='';
}

if(subject instanceof Array){
for(k in subject){
subject[k]=str_replace(search,replace,subject[k]);
}
return subject;
}

for(var k=0; k-1){
subject = subject.replace(search[k], replace[k]);
i = subject.indexOf(search[k],i);
}
}

return subject;

}

// Аналог РНР-функции parse_url
function parse_url (str, component) {

var  o   = {
strictMode: false,
key: ["source","protocol","authority","userInfo","user","password","host","port","relative","path","directory","file","query","anchor"],
q:   {
name:   "queryKey",
parser: /(?:^|&)([^&=]*)=?([^&]*)/g
},
parser: {
strict: /^(?:([^:\/?#]+):)?(?:\/\/((?:(([^:@]*):?([^:@]*))?@)?([^:\/?#]*)(?::(\d*))?))?((((?:[^?#\/]*\/)*)([^?#]*))(?:\?([^#]*))?(?:#(.*))?)/,
loose:  /^(?:(?![^:@]+:[^:@\/]*@)([^:\/?#.]+):)?(?:\/\/\/?)?((?:(([^:@]*):?([^:@]*))?@)?([^:\/?#]*)(?::(\d*))?)(((\/(?:[^?#](?![^?#\/]*\.[^?#\/.]+(?:[?#]|$)))*\/?)?([^?#\/]*))(?:\?([^#]*))?(?:#(.*))?)/ // Added one optional slash to post-protocol to catch file:/// (should restrict this)
}
};

var m   = o.parser[o.strictMode ? "strict" : "loose"].exec(str),
uri = {},
i   = 14;
while (i--) {uri[o.key[i]] = m[i] || "";}
switch (component) {
case 'PHP_URL_SCHEME':
return uri.protocol;
case 'PHP_URL_HOST':
return uri.host;
case 'PHP_URL_PORT':
return uri.port;
case 'PHP_URL_USER':
return uri.user;
case 'PHP_URL_PASS':
return uri.password;
case 'PHP_URL_PATH':
return uri.path;
case 'PHP_URL_QUERY':
return uri.query;
case 'PHP_URL_FRAGMENT':
return uri.anchor;
default:
var retArr = {};
if (uri.protocol !== '') {retArr.scheme=uri.protocol;}
if (uri.host !== '') {retArr.host=uri.host;}
if (uri.port !== '') {retArr.port=uri.port;}
if (uri.user !== '') {retArr.user=uri.user;}
if (uri.password !== '') {retArr.pass=uri.password;}
if (uri.path !== '') {retArr.path=uri.path;}
if (uri.query !== '') {retArr.query=uri.query;}
if (uri.anchor !== '') {retArr.fragment=uri.anchor;}
return retArr;
}
}

// Собственно, само переключение
function switch_language(from, to) {
    // Если языки совпадают - пропустить
    if (from == to) return false;
    // Получить УРЛ
    var url = document.location.href;
    // Распарсить
    var purl = parse_url(url);
    // Взять ток путь
    var path = purl.path;
    var nurl;
    // Вариант для главной страницы
    if (path == '/') {
        nurl = url+to+'/';
        // Для внутренних страниц
    } else {
        nurl = str_replace('/'+from+'/', '/'+to+'/', url);
        //nurl = url.replace(/from/, to);
    }
    // Переход по новому адресу
    document.location.href = nurl;
    return false;
}

Пример работы вы можете посмотреть на сайте Шанхайской Организации Сотрудничества (ШОС)

Для вставки кода используйте HTML-теги
<pre><code class="php">ваш код</code></pre>

  • Ольга Крахмалёва

    не работает он. Перенаправляет на главную страницу и всё тут. Да и главные страницы на разных языках между собой различаются по своему содержимому

    • Тогда этот вариант не для вас.

      • Ольга Крахмалёва

        Он не для кого. Он даже в демо версии не работает, о чём может идти речь?

        • О какой демо-версии идет речь?

        • Если вы о сайте ШОС, так его за 6 лет переделали не единожды. Пост от 2009 года)

  • max_7548

    В строке 29 лишняя фигурная скобка.
    В строке 25 не хватает «;» точки с запятой.

    Скрипт у меня не заработал. Наверное кривые руки, но не хочется вникать почему не работает, может попозжа еще раз гляну.

    • Спасибо за наводку об ошибках. Поправлю

  • Не знаю как остальные, а я не наблюдаю интелектуального переключения языков на указанном сайте «Шанхайской Организации Сотрудничества (ШОС)».
    Находясь на странице «Кто есть кто?» при переключения языка загружается домашняя страница английской версии, а не страница «Who is who?».
    Либо скрипт не работает, либо с сайтом что то не то.

    • С 2009 года сайт неоднократно переделывался, эта функция была упразднена, так как редакторы не успевали ставить переводы на другие языки

      • В таком случае попробую Ваш скрипт На своем сайте, если не возражаете.
        О результатах отпишусь.

  • Дмитрий

    В хэде такая строка:

    скрипт отдельным файлом, как видите, в соответствующей папке
    кнопки переключения в блоке меню вписались аккуратно (эстетически) в виде маленьких подпунктиков в стороне с «подсветкой» текущего языка, в коде это выглядит так:

    [html]
    <a href="/en/" rel="nofollow">en</a>
    <a href="/ru/" rel="nofollow">ru</a>
    <a href="/es/" rel="nofollow">es</a>
    [/html]

  • Дмитрий

    Здравствуйте!
    Спасибо за статью. Я не вполне хорош в JS, прямо скажем «ламер».
    Будьте любезны, объясните можно ли этот метод встроить в HTML5? И если можно, то как это правильно реализовать? Как прописать в коде ссылку на скрипт.
    А-то у меня переключение работает на сайте, а «умное» не прикручивается никак.
    Заранее спасибо!

    • Собственно, ничего менять и не надо. Покажите ваш код — подправим, если не работает

  • str_replace() это аналог РНР-ной функции str_replace(), которая может в качестве аргументов принимать и массивы. В данном случае можно обойтись и без неё.

  • Степан

    А зачем вы заменили url.replace на str_replace?