原生js获取浏览器语言配置，设置文本多语言（小demo）

项目中遇到多语言的支持问题，多语言主要要做到两点：

根据用户目前的浏览器配置语言进行显示
提供语言切换按钮，用户自定义选择不同的语言显示

在这里，首先展示一个获取用户当前浏览器配置语言进行显示的小demo。
代码主要分为两部分，index.html文件和language.js。

// language.jsvar love = ['我爱你.', 'I love you!'];

通过设置所取的love数组中元素的index值，来设定不同的语言。例如love[0] 为’我爱你’，love[1]为‘I love you’。
index.html文件

<!DOCTYPE html>
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script><script type="text/javascript" src="language.js"></script>
</head>
<body><div id="text"></div><script>var lang_flag;var lang = navigator.language || navigator.userLanguage; //常规浏览器语言和IE浏览器lang = lang.substr(0, 2); //截取lang前2位字符if (lang == 'zh') {lang_flag = 0;} else {lang_flag = 1;}$('#text').text(love[lang_flag])</script>
</body>
</html>

笔者使用的Chrome 浏览器，语言设置为English，Settings->Advanced->Language

页面显示如下：

改为中文浏览器：

注意：index.html中需要有meta标签`<meta charset="UTF-8">`,如果没有，中文会显示乱码。

原生js获取浏览器语言配置，设置文本多语言（小demo）相关推荐

[完美]原生JS获取浏览器版本判断--支持Edge,IE,Chrome,Firefox,Opera,Safari,以及各种使用Chrome和IE混合内核的浏览器...
[完美]原生JS获取浏览器版本判断--支持Edge,IE,Chrome,Firefox,Opera,Safari,以及各种使用Chrome和IE混合内核的浏览器原文:[完美]原生JS获取浏览器版本判 ...
原生JS获取浏览器版本判断--支持Edge,IE,Chrome,Firefox,Opera,Safari(亲测可用）
浏览器类型及版本判断在开发中是比较常见的使用场景,之前用var ua = navigator.userAgent.toLowerCase()来判断浏览器的内核,发现chrome和edge浏览器无法区分 ...
原生JS 获取浏览器类型-2022新版
浏览器类型的获取逻辑需要不断更新,因为各家浏览器会更新他们的底层,导致之前的逻辑失败后续出现不兼容问题的话,再进行更新当前版本:20220106 function checkBrowser() { ...
html光标定位到文本框,js获取光标位置和设置文本框光标位置示例代码
function getTxt1CursorPosition(){ var oTxt1 = document.getElementById("txt1"); var cursurP ...
原生JS获取ScrollTop/ScrollLeft
使用原生JS获取浏览器ScrollTop,ScrollLeft的方法: function scroll() {if (window.pageYOffset != null){ // 支持IE9 +re ...
原生js获取以固定字符开头的控件id，并设置属性
原生js获取以固定字符开头的控件id,并设置属性还在用JQ加CSS选择器获取指定id开头的DOM嘛? 现在试试 JavaScript提供的querySelectorAll函数目前几乎主流浏览器均支 ...
怎么修改html行内样式表,原生JS获取及设置CSS样式-1.行内样式
面试中,应该会经常被问到样式的写法以及如何使用原生JS获取及操作样式的问题吧,让我给大家总结一下~ HTML中样式的写法不外乎以下四种方式行内样式假装有内容 head内部样式 div { widt ...
js获取浏览器语言（ie、ff、chrome）、contextpath
js获取浏览器语言(ie.ff.chrome).contextpath /js获取浏览器语言(ie.ff.chrome) Java代码 var language_en_us = "en- ...
js 获取浏览器版本信息（全）
原文地址 js 获取浏览器版本信息(全) 觉得挺不错的,所以就收藏起来 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitiona ...
JS获取浏览器高度并赋值给类
JS获取浏览器宽高的兼容写法: var w = window.innerWidth || document.documentElement.clientWidth || document.body.c ...

原生js获取浏览器语言配置，设置文本多语言（小demo）

注意：index.html中需要有meta标签`<meta charset="UTF-8">`,如果没有，中文会显示乱码。

原生js获取浏览器语言配置，设置文本多语言（小demo）相关推荐

最新文章

热门文章

原生js获取浏览器语言配置，设置文本多语言（小demo）

注意：index.html中需要有meta标签<meta charset="UTF-8">,如果没有，中文会显示乱码。

原生js获取浏览器语言配置，设置文本多语言（小demo）相关推荐

最新文章

热门文章

注意：index.html中需要有meta标签`<meta charset="UTF-8">`,如果没有，中文会显示乱码。