html js 浏览器语言,JS 浏览器语言检测

HTML

导入代码模板：

Navigator.language

Your language is

Change to:

English

Spanish

French

Italian

Portuguese

Chinese

Este es un titulo en español

Esta es una descripccion en español

<h3 data-locale="title">Este es un titulo en español</h3>

<p data-locale="description">Esta es una descripccion en español</p>

---

Error demo.

demo error 1

demo error 2

<p data-locale="sub">demo error 1</p>

// locales

// File: locales.js

var locale = {

es: {

title: 'Este es un titulo en español',

description: 'Esta es una descripccion en español',

sub: 'en español existe'

},

en: {

title: 'This is a title in english',

description: 'this is a description in english'

},

fr: {

title: 'Ceci est un titre en espagnol',

description: 'Ceci est une description complète en espagnol'

},

it: {

title: 'Si tratta di un titolo in spagnolo',

description: 'Si tratta di una descrizione completa in spagnolo'

},

pt: {

title: 'Este é um título em espanhol',

description: 'Esta é uma descrição completa em espanhol'

},

zh-CN: {

title: '中文标题',

description: '中文描述'

}

}

// your favorite lang

var base = 'es';

// show data-locale error

var showErrors = true;

// Get lang

var lang = navigator.language || navigator.userLanguage;

// show lang

document.querySelector('.prefix').textContent = lang.toLocaleUpperCase();

// Get all data-locale attributes

var dl = document.querySelectorAll('[data-locale]'),

lta = Array.prototype.slice.call(dl);

lta.forEach(function(obj, index) {

// get title description etc..

var data = obj.getAttribute('data-locale') || '';

var error = '';

if (showErrors) {

error = 'data-locale error data-locale="' + data + '" not exist';

} else {

error = obj.textContent;

}

if (data) {

// if exist lang show if not show base lang

if (locale[lang]) obj.innerHTML = locale[lang][data] || error;

else obj.innerHTML = locale[base][data] || error;

}

});