Атрибут onlanguagechange тега <body>
Описание
Атрибут onlanguagechange позволяет задать JavaScript-код, который выполняется при изменении предпочитаемого языка пользователя в браузере или операционной системе. Это особенно полезно для мультиязычных приложений, которые должны динамически реагировать на смену языка.
<body onlanguagechange="updateLanguage()">
<h1 id="greeting">Приветствие</h1>
<p id="content">Содержимое страницы</p>
<script>
const translations = {
en: {
greeting: "Hello",
content: "Welcome to our website"
},
fr: {
greeting: "Bonjour",
content: "Bienvenue sur notre site"
},
ru: {
greeting: "Привет",
content: "Добро пожаловать на наш сайт"
}
};
function updateLanguage() {
const language = navigator.language.split('-')[0];
const texts = translations[language] || translations.en;
document.getElementById('greeting').textContent = texts.greeting;
document.getElementById('content').textContent = texts.content;
}
// Инициализация при загрузке
updateLanguage();
</script>
</body>
Основные свойства и методы:
| Свойство/Метод | Описание |
|---|---|
navigator.language |
Возвращает основной язык браузера |
navigator.languages |
Массив предпочитаемых языков пользователя |
Intl API |
Современный API для интернационализации |
Рекомендации по использованию:
- Используйте для динамического переключения языка интерфейса
- Сочетайте с localStorage для сохранения выбора языка
- Для сложных приложений используйте библиотеки i18n (i18next, vue-i18n)
- Всегда предоставляйте fallback на язык по умолчанию
- Тестируйте с разными языковыми настройками
Практический пример с сохранением выбора:
<body onlanguagechange="handleLanguageChange()">
<select id="language-selector">
<option value="en">English</option>
<option value="fr">Français</option>
<option value="ru">Русский</option>
</select>
<div id="app-content"></div>
<script>
// Инициализация с учетом сохраненного выбора
const savedLanguage = localStorage.getItem('userLanguage') ||
navigator.language.split('-')[0];
document.getElementById('language-selector').value = savedLanguage;
function handleLanguageChange() {
const newLanguage = navigator.language.split('-')[0];
updateContent(newLanguage);
}
function updateContent(lang) {
// Загрузка контента для выбранного языка
localStorage.setItem('userLanguage', lang);
// ... логика обновления интерфейса
}
// Обработчик ручного выбора языка
document.getElementById('language-selector').addEventListener('change', (e) => {
updateContent(e.target.value);
});
// Первоначальная загрузка
updateContent(savedLanguage);
</script>
</body>
Важные замечания:
- Событие поддерживается не во всех браузерах
- Для надежности используйте комбинацию с другими методами
- Изменение языка в ОС не всегда сразу отражается в браузере
- Мобильные браузеры могут обрабатывать событие по-разному
- Для SSR-приложений нужна дополнительная серверная логика
Современные альтернативы:
<script>
// 1. Использование Intersection Observer API
const langObserver = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
const lang = entry.target.getAttribute('lang');
document.documentElement.lang = lang;
}
});
});
// 2. Использование Internationalization API
function formatDate(date, lang) {
return new Intl.DateTimeFormat(lang, {
year: 'numeric',
month: 'long',
day: 'numeric'
}).format(date);
}
// 3. Библиотеки i18n
import i18n from 'i18next';
i18n.init({
lng: localStorage.getItem('userLanguage') || navigator.language,
resources: {
en: { translations: { /* ... */ } },
fr: { translations: { /* ... */ } }
}
});
</script>
Примечание: Для профессиональных мультиязычных решений рекомендуется использовать специализированные библиотеки интернационализации, такие как i18next, которые предоставляют более полный набор функций для работы с переводами и языковыми настройками.