原生js獲取瀏覽器語言配置，設定文字多語言（小demo）

阿新 • • 發佈：2019-01-07

專案中遇到多語言的支援問題，多語言主要要做到兩點：

根據使用者目前的瀏覽器配置語言進行顯示
提供語言切換按鈕，使用者自定義選擇不同的語言顯示

在這裡，首先展示一個獲取使用者當前瀏覽器配置語言進行顯示的小demo。
程式碼主要分為兩部分，index.html檔案和language.js。

// language.js

var 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）

專案中遇到多語言的支援問題，多語言主要要做到兩點：根據使用者目前的瀏覽器配置語言進行顯示提供語言切換按鈕，使用者自定義選擇不同的語言顯示在這裡，首先展示一個獲取使用者當前瀏覽器配置語言進行顯示的小demo。程式碼主要分為兩部分，index.ht

原生JS相容所有瀏覽器獲取瀏覽器高度和寬度,響應式佈局 js 獲取瀏覽器高度和寬度值(相容多瀏覽器)

var width = window.innerWidth||document.documentElement.clientWidth||document.body.clientWidth;

原生js獲取url傳遞引數，js獲取url？後傳遞的引數

方法一：正則分析法function getQueryString(name) { var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i"); var r

QT 4 設定按鈕大小，設定wigdet 大小例子（除錯通過）

classMywidget:publicQWidget { Q_OBJECT public: explicitMywidget(QWidget*parent=0); signals: publicslots: private: QPushButton*TestPushButt

js獲取瀏覽器預設語言設定

專案用到多語言，之前也接觸過，不過沒有自測過，通過自測，寫出通用比較簡化的方法 !function () { var lang = navigator.language||navigat

CentOS 7.x網路配置，設定自動獲取IP地址

檢視網路配置資訊使用以下命令檢視網格配置資訊： ip addr 為什麼不是ifconfig呢？因為它已經在新版的CentOS中被優化掉啦！如果有需要，可以用以下命令將其召喚回來，但前提是你得先能連上網啊，哈哈！ yum install net-tools -y 示例

react使用原生js獲取點選的ul下的第幾個li 並設定className為active

import React from 'react' import './index.less'; import { Link } from "react-router-dom"; class Index extends React.Component { state

JS獲取瀏覽器視窗大小獲取螢幕，瀏覽器，網頁高度寬度（轉載）

網頁可見區域寬：document.body.clientWidth 網頁可見區域高：document.body.clientHeight 網頁可見區域寬：document.body.offsetWidth (包括邊線的寬) 網頁可見區域高：document

原生JS獲取DOM 節點到瀏覽器頂部的距離或者左側的距離

關於js獲取dom 節點到瀏覽器頂/左部的距離，Jquery裡面有封裝好的offset().top/offset().left，只到父級的頂/左部距離position().top/position().left；原生寫的話就是用獲取節點，do while迴圈就可以了。程式碼如下 <!DOCT

通過js獲取到螢幕高度，藉助螢幕高度設定div的高度

<div id="test" style=" border: solid 1px #f00; "></div> <script type="text/javascript"> autoDivSize(); functio

js獲取瀏覽器和設備相關width（屏幕的寬度）

view dev viewport document one size ini left cal 首先呢，我們將iPhone手機的相關數據表示如下我們要理解很多東西，比如邏輯分辨率、物理分辨率、縮放因子、ppi等，這裏先不討論。首先呢，我們先介紹下各個屏幕寬度：網

js 獲取瀏覽器高度和寬度值

工作 nth 目前 idt 可見精確滾動獲取對象 nbsp IE中： document.body.clientWidth ==> BODY對象寬度 document.body.clientHeight ==> BODY對象高度 document.docum

JS獲取鼠標位置，兼容IE FF

pos client || 人的兼容 fun b2c win epo 原文發布時間為：2009-08-31 —— 來源於本人的百度文章 [由搬家工具導入]由于Firefox和IE等浏览&#

原生js獲取元素樣式值

應該 eight current document 疑惑行內樣式 lin script 輸出在學習js初期，就一直有一個疑問，獲取元素樣式的值，不是直接使用obj.style.left之類的就可以得到了嗎？可是使用這樣的方式，有的時候能夠獲取得到，有的時候又不能獲取，

js獲取瀏覽器信息

平臺 clas navigator depth 信息 string 屏幕 soft height function message() { txt = "<p>瀏覽器代碼名: " + navigator.appCodeName + "</p>";

yii2 多語言配置，帶cookie

Language 翻譯總結 es2017 cnblogs 檢測頂部瀏覽器 src 這兩天被多語言搞蒙逼了，先總結一下文檔型的。 1、到 params.php 配置語言種類 2、到 view 層 site —— index.php 將語言種類輸出，將

js獲取圖片的EXIF，解決圖片旋轉問題

exif source 角度 function 平衡 mar uiwebview rom can 相信大家在做項目的時候會遇到在canvas裏加入圖片時，圖片發生90°，180°的旋轉。當時的你肯定時懵逼的，為毛。其實這就是圖片的EXIF搞的鬼。什麽是EXIF 簡單來

原生JS的地區二級聯動，很好理解的邏輯

貴陽江北區 getc width 臺灣省 mpat 泰安漯河廣東 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta

js獲取table的值，js獲取td裏input的值

table UNC child flask 字符串 doc 變量 lis script 1、如果想讓table具有可以編輯的功能，可以在table裏嵌入input標簽寫法{{ list_one[1] or ‘‘ }}的作用是，當list_one[1]取值為None時，前端

js獲取當前時間戳，仿PHP函數模式

time() HP bsp col 獲取時間 bstr time php span 函數： /** * 獲取時間戳函數 * 仿PHP函數模式 */ function time(){ var this_time = Date.parse(new Da

原生js獲取瀏覽器語言配置，設定文字多語言（小demo）

注意：index.html中需要有meta標籤<meta charset="UTF-8">,如果沒有，中文會顯示亂碼。

相關推薦

注意：index.html中需要有meta標籤`<meta charset="UTF-8">`,如果沒有，中文會顯示亂碼。