web网页多语言的实现方案_前端实现多语言切换
实现的效果
需要在web中实现多语言的切换,当用户语言切换完成后下次重新打开网页,也是上次设置的语言进行显示。
资源网站搜索大全https://55wd.com
实现步骤
1、在用户点击切换语言后,把选择的语言版本保存在cookie中
//写入cookie函数
function setCookie(name,value)
{
var Days = ;
var exp = new Date();
exp.setTime(exp.getTime() + Days****);
document.cookie = name + "="+ escape (value) + ";expires=" + exp.toGMTString();
} //获取cookie
function getCookie(name)
{
var arr,reg=new RegExp("(^| )"+name+"=([^;]*)(;|$)");
if(arr=document.cookie.match(reg))
return unescape(arr[]);
else
return null;
} //setCookie('lan','hk'); 繁体中文
//setCookie('lan','cn'); 简体中文
//setCookie('lan','en'); 英文
2、在包含静态文本的标签中,添加一个属性:set-lan=”html:name” ,属性值中的html代表内容的位置,name代表要替换的文字的标识 。例如:
<span set-lan="html:name">名字</span>
<input type="text" value="名字" set-lan="val:name" />
这些就需要前端工程师在开发过程中添加进去,并且,要切换语言文字的外面都必须要有一个标签包裹,否则无法进行切换;
如:
<span set-lan="html:name"><i class="icon"></i>名字</span>
这样的代码,是无法把“名字”替换成“Name”的,会把“名字”前面的i标签也一起替换掉,如果不想把i标签也替换掉,就要在“名字”外面添加一个标签,改成:
<span><i class="icon"></i><lan set-lan="html:name">名字</lan></span>
3、定义3个语言的标识+内容的json字符串
var cn = {
"name" : "姓名",
"tel" : "电话",
"email" : "邮箱",
}; var hk = {
"name" : "姓名",
"tel" : "電話",
"email" : "郵箱",
}; var en = {
"name" : "Name",
"tel" : "Tel",
"email" : "Email",
};
4、遍历带set-lan属性的标签,进行文本替换
$('[set-lan]').each(function(){
var me = $(this);
var a = me.attr('set-lan').split(':');
var p = a[]; //文字放置位置
var m = a[]; //文字的标识 //用户选择语言后保存在cookie中,这里读取cookie中的语言版本
var lan = getCookie('lan'); //选取语言文字
switch(lan){
case 'cn':
var t = cn[m]; //这里cn[m]中的cn是上面定义的json字符串的变量名,m是json中的键,用此方式读取到json中的值
break;
case 'en':
var t = en[m];
break;
default:
var t = hk[m];
} //如果所选语言的json中没有此内容就选取其他语言显示
if(t==undefined) t = cn[m];
if(t==undefined) t = en[m];
if(t==undefined) t = hk[m]; if(t==undefined) return true; //如果还是没有就跳出 //文字放置位置有(html,val等,可以自己添加)
switch(p){
case 'html':
me.html(t);
break;
case 'val':
case 'value':
me.val(t);
break;
default:
me.html(t);
} });
5、以上是html中的文字替换,但是写在js中的文字怎么办? 可以定义一个函数,来读取
function get_lan(m)
{
//获取文字
var lan = getCookie('lan'); //语言版本
//选取语言文字
switch(lan){
case 'cn':
var t = cn[m];
break;
case 'hk':
var t = hk[m];
break;
default:
var t = en[m];
} //如果所选语言的json中没有此内容就选取其他语言显示
if(t==undefined) t = cn[m];
if(t==undefined) t = en[m];
if(t==undefined) t = hk[m]; if(t==undefined) t = m; //如果还是没有就返回他的标识 return t;
}
那么在js中使用的文字就只要用此函数来读取就可以了 ,如
alert('姓名');
//改成
alert(get_lan('name'));
web网页多语言的实现方案_前端实现多语言切换的更多相关文章
- C#开发BIMFACE系列49 Web网页中加载模型与图纸的技术方案
BIMFACE二次开发系列目录 [已更新最新开发文章,点击查看详细] 在BIMFACE二次系列博客中详细介绍了服务器端API的调用方式,如下列表 C#开发BIMFACE系列1 BIMFAC ...
- Unity3d嵌入web网页
应用场景 程序中的界面风格 UI内容等相关内容需要很容易方便的跟新替换,不使用unity传统的热加载方式,也不想使用和H5等做混合APP的时候, 就用嵌入web来实现. 假如我想替换某个背景图,一般来 ...
- TI IPNC Web网页之网页修改教程
web网页程序修改 打开gStudio之后,点击菜单栏中Help->Contents.先把这个诡异的编程语言看一遍吧.这里搬一些东西出来. GoDB简介 从第一副图片中,我们可以看出,从源文件到 ...
- jquery/vue/react前端多语言国际化翻译方案指南
❝ 本文章共3470字,预计阅读时间5-10分钟. ❞ 国际化-前言 每个开发者能希望编写的程序可以让全世界的用户使用,它要求从产品中抽离所有地域语言,国家/地区和文化相关的元素.换种说法,「应用程序 ...
- .NET桌面程序集成Web网页开发的多种解决方案
系列目录 [已更新最新开发文章,点击查看详细] B/S架构的Web程序几乎占据了应用软件的绝大多数市场,但是C/S架构的WinForm.WPF客户端程序依然具有很实用的价值,如设计类软件 Au ...
- TI IPNC Web网页之流程分析
流程 Appro IPNC使用的web服务器是boa. 请仔细理解下面这段话. boa这个web服务器是GUI界面和IPNC应用程序之间的通信的桥梁.它的责任是从web GUI中接收HTTP请求,并且 ...
- web网页练习
一. HTML部分 1. XHTML和HTML有什么区别 HTML是一种基本的WEB网页设计语言,XHTML是一个基于XML的置标语言最主要的不同: XHTML 元素必须被正确地嵌套. XHTML 元 ...
- web网页 页面布局的几种方式(转)
web网页 页面布局的几种方式 转载 2017年06月16日 12:19:40 2218 网页基本布局方式: (1)流式布局 Fluid 流布局与固定宽度布局基本不同点 就在于对网站尺寸的侧量单位不同 ...
- 简单web网页与SSM后台交互
简单web网页与SSM后台交互 情况说明 如今,已经搭建好SSM后台开发环境,并且可以经由postman工具测试成功.现在尝试写出web前端网页,通过实现简单的提交.注册.查询功能来加深对前后端数据传 ...
随机推荐
- java实现 蓝桥杯 算法训练 Password Suspects
问题描述 在年轻的时候,我们故事中的英雄--国王 Copa--他的私人数据并不是完全安全地隐蔽.对他来说是,这不可接受的.因此,他发明了一种密码,好记又难以破解.后来,他才知道这种密码是一个长度为奇数 ...
- Java实现 蓝桥杯 历届试题 连号区间数
问题描述 小明这些天一直在思考这样一个奇怪而有趣的问题: 在1~N的某个全排列中有多少个连号区间呢?这里所说的连号区间的定义是: 如果区间[L, R] 里的所有元素(即此排列的第L个到第R个元素)递增 ...
- Java实现第九届蓝桥杯字母阵列
字母阵列 题目描述 仔细寻找,会发现:在下面的8x8的方阵中,隐藏着字母序列:"LANQIAO". SLANQIAO ZOEXCCGB MOAYWKHI BCCIPLJQ SLAN ...
- Scrapy 小技巧(一):使用 scrapy 自带的函数(follow & follow_all)优雅的生成下一个请求
前言 如何优雅的获取同一个网站上下一次爬取的链接并放到生成一个 Scrapy Response 呢? 样例 from urllib import parse import scrapy class S ...
- JSP基础知识点(转传智)
一.JSP概述 1.JSP:Java Server Pages(运行在服务器端的页面).就是Servlet. 学习JSP学好的关键:时刻联想到Servlet即可. 2.JSP的原理 ...
- 09.Django-数据库优化
Django查询数据库性能优化 现在有一张记录用户信息的UserInfo数据表,表中记录了10个用户的姓名,呢称,年龄,工作等信息. models文件 from django.db import mo ...
- 【Navicat】Navicat for MongoDBv15.0.6破解版(附破解教程)
安装包下载链接:https://download.csdn.net/download/l1028386804/12519681 Navicat for MongoDB 15是一款功能十分强大的数据库管 ...
- Spring:BeanDefinition&PostProcessor不了解一下吗?
水稻:这两天看了BeanDefinition和BeanFactoryPostProcessor还有BeanPostProcessor的源码.要不要了解一下 菜瓜:six six six,大佬请讲 水稻 ...
- LaTeX常用符号(持续更新)
参考网址:https://qianwenma.cn/2018/05/17/mathjax-yu-fa-can-kao/# 基本运算 1.乘法$x\times y$ x\times y 2.乘法$x^{ ...
- cc32b_demo-32dk2j_cpp_纯虚函数与抽象类2-txwtech
cc32b_demo-32dk2j_cpp_纯虚函数与抽象类2-txwtech //纯虚函数是用来继承用的//纯虚函数//抽象类-抽象数据类型//*任何包含一个或者多个纯虚函数的类都是抽象类//*不要 ...