前端多语言加载适配方法、装置、计算机设备及存储介质制造方法及图纸

技术编号:24798957 阅读:23 留言:0更新日期:2020-07-07 20:57
本发明专利技术实施例公开了一种前端多语言加载适配方法、装置、计算机设备及存储介质,包括下述步骤:获取目标浏览器的用户语言;加载与所述用户语言相对应的语言文件;根据所述语言文件更新页面显示,并将所述语言文件存储于浏览器的指定存储区域,用于更新同一域名网络页面的语言设置。通过这种方法实现的多语言加载,实现了对第三方的零依赖,即不依赖于特定的前端框架选型,可以方便地适用于各种前端框架。在加载语言文件或改变使用语言时,同域名下所有页面中的语言设置将统一更新,为用户提供全站统一的多语言显示。

【技术实现步骤摘要】
前端多语言加载适配方法、装置、计算机设备及存储介质
本专利技术涉及计算机应用
,特别是涉及一种前端多语言加载适配方法、装置、计算机设备及存储介质。
技术介绍
目前,针对多语言显示问题,各大前端框架都有较为成熟的国际化解决方案,它们以插件的方式存在,可方便地接入当前开发环境,如:vue-i18n,angular-translate,react-intl,jQuery.i18n等,虽然用法不尽相同,但是它们解决的问题和实现方式比较类似,即都是把翻译好的多语言转化为map结构,然后根据当前语言获取当前语言key下的文案,替换填充至相应位置,从而实现不同用户语言下显示不同文案的需求。需要注意的是,如果多语言文案过多,一般的处理方式是将每种语言的文案单独做成一个语言文件,在确定用户语言之后,再去单独加载对应语言的语言文件。但是,现有技术中的方案仍存在许多不足之处。首先,当前的主流方案并没有对外提供准确获取用户语言的方法,更多的是实现已知用户语言下的相应多语言展示。然而,在浏览器环境下如何获取用户的使用语言是前端多语言显示中的一个重要问题。其次,多语言的本地测试不够方便,即在开发模式下无法便捷地测试各种语言的展示情况。另外,目前的方案还存在无法记录用户的语言使用习惯、多页面之间无法及时响应用户语言改变等问题。
技术实现思路
本专利技术实施例能够提供一种准确获取用户语言、为用户提供快捷的多语言显示服务的前端多语言加载适配方法、装置、计算机设备及存储介质。为解决上述技术问题,本专利技术创造的实施例采用的一个技术方案是:提供一种前端多语言加载适配方法,包括以下步骤:获取目标浏览器的用户语言;加载与所述用户语言相对应的语言文件;根据所述语言文件更新页面显示,并将所述语言文件存储于浏览器的指定存储区域,用于更新同一域名网络页面的语言设置。可选地,所述确定用户语言的步骤,包括以下步骤:获取所述目标浏览器当前页面的统一资源定位符;判断所述统一资源定位符中是否存在语言参数;当所述统一资源定位符中存在语言参数时,定义所述语言参数为用户语言。可选地,所述判断所述统一资源定位符中是否存在语言参数的步骤之后,包括以下步骤:当所述统一资源定位符中不存在语言参数时,获取所述目标浏览器的本地存储;在所述本地存储中查找语言使用记录;当所述本地存储中存在语言使用记录时,定义所述使用记录中的语言为用户语言。可选地,所述在所述本地存储中查找语言使用记录的步骤之后,包括以下步骤:当所述本地存储中不存在语言使用记录时,获取所述目标浏览器的语言标识;在预设的映射关系表中查找与所述语言标识具有映射关系的语言码;定义所述语言码为用户语言。可选地,所述加载与所述用户语言相对应的语言文件的步骤,包括下述步骤:获取所述目标浏览器的本地存储;在所述本地存储中查找所述用户语言对应的语言文件;当所述本地存储中存在所述语言文件时,加载所述语言文件;当本地存储中不存在所述语言文件时,根据所述用户语言请求对应文件,加载所述对应文件,并将所述对应文件存储到所述本地存储。可选地,所述根据所述语言文件更新页面显示,并将所述语言文件存储于浏览器的指定存储区域,用于更新同一域名网络页面的语言设置的步骤之后,包括下述步骤:获取所述存储区域内的语言信息;将所述语言信息与预设的语言状态进行比对;当所述语言信息与所述语言状态不一致时,确认所述存储区域存储的语言信息发生变化。可选地,所述根据所述语言文件更新页面显示,并将所述语言文件存储于浏览器的指定存储区域,用于更新同一域名网络页面的语言设置的步骤之后,包括下述步骤:获取所述存储区域内的语言变化信息;根据预设的语言列表识别所述语言变化信息是否为预设的目标状态;当所述语言变化信息表征的内容与所述目标状态的内容一致时,所述网络页面根据所述语言变化信息调整语言设置。为解决上述技术问题,本专利技术实施例还提供一种前端多语言加载适配装置,包括:获取模块,用于获取目标浏览器的用户语言;处理模块,用于加载与所述用户语言相对应的语言文件;执行模块,用于根据所述语言文件更新页面显示,并将所述语言文件存储于浏览器的指定存储区域,用于更新同一域名网络页面的语言设置。为解决上述技术问题,本专利技术实施例还提供一种计算机设备,包括存储器和处理器,所述存储器中存储有计算机可读指令,所述计算机可读指令被所述处理器执行时,使得所述处理器执行上述所述前端多语言加载适配方法的步骤。为解决上述技术问题,本专利技术实施例还提供一种存储有计算机可读指令的存储介质,所述计算机可读指令被一个或多个处理器执行时,使得一个或多个处理器执行上述所述前端多语言加载适配方法的步骤。本专利技术实施例的有益效果是:相比于目前主流的需要已知用户的语言才进行多语言展示的方案,本专利技术实施例的技术方案根据浏览器中的特定数据准确获取用户使用的语言,可以更加灵活、高效地获取到用户的语言,根据用户语言加载对应的语言文件,并实现页面内容的更新,通过这种方法实现的多语言加载,实现了对第三方的零依赖,即不依赖于特定的前端框架选型,可以方便地适用于各种前端框架。在加载语言文件或改变使用语言时,同域名下的所有页签中的语言设置将统一更新,为用户提供全站统一的多语言显示。附图说明为了更清楚地说明本专利技术实施例中的技术方案,下面将对实施例描述中所需要使用的附图作简单地介绍,显而易见地,下面描述中的附图仅仅是本专利技术的一些实施例,对于本领域技术人员来讲,在不付出创造性劳动的前提下,还可以根据这些附图获得其他的附图。图1为本专利技术实施例前端多语言加载适配方法的基本流程示意图;图2为本专利技术实施例从统一资源定位符中获取用户语言的流程示意图;图3为本专利技术实施例从本地存储中获取用户语言的流程示意图;图4为本专利技术实施例从浏览器的语言标识中获取用户语言的流程示意图;图5为本专利技术实施例加载语言文件的流程示意图;图6为本专利技术实施例确定指定存储区域内容变化的流程示意图;图7为本专利技术实施例调整网络页面语言设置的流程示意图;图8为本专利技术实施例前端多语言加载适配装置的基本结构框图;图9为本专利技术实施例计算机设备基本结构框图。具体实施方式为了使本
的人员更好地理解本专利技术方案,下面将结合本专利技术实施例中的附图,对本专利技术实施例中的技术方案进行清楚、完整地描述。在本专利技术的说明书和权利要求书及上述附图中的描述的一些流程中,包含了按照特定顺序出现的多个操作,但是应该清楚了解,这些操作可以不按照其在本文中出现的顺序来执行或并行执行,操作的序号如101、102等,仅仅是用于区分开各个不同的操作,序号本身不代表任何的执行顺序。另外,这些流程可以包括更多或更少的操作,并且这些操作可以按顺序执行或并行执行。需要说明的是,本文档来自技高网
...

【技术保护点】
1.一种前端多语言加载适配方法,其特征在于,包括以下步骤:/n获取目标浏览器的用户语言;/n加载与所述用户语言相对应的语言文件;/n根据所述语言文件更新页面显示,并将所述语言文件存储于浏览器的指定存储区域,用于更新同一域名网络页面的语言设置。/n

【技术特征摘要】
1.一种前端多语言加载适配方法,其特征在于,包括以下步骤:
获取目标浏览器的用户语言;
加载与所述用户语言相对应的语言文件;
根据所述语言文件更新页面显示,并将所述语言文件存储于浏览器的指定存储区域,用于更新同一域名网络页面的语言设置。


2.如权利要求1所述的前端多语言加载适配方法,其特征在于,所述确定用户语言的步骤,包括以下步骤:
获取所述目标浏览器当前页面的统一资源定位符;
判断所述统一资源定位符中是否存在语言参数;
当所述统一资源定位符中存在语言参数时,定义所述语言参数为用户语言。


3.如权利要求2所述的前端多语言加载适配方法,其特征在于,所述判断所述统一资源定位符中是否存在语言参数的步骤之后,包括以下步骤:
当所述统一资源定位符中不存在语言参数时,获取所述目标浏览器的本地存储;
在所述本地存储中查找语言使用记录;
当所述本地存储中存在语言使用记录时,定义所述使用记录中的语言为用户语言。


4.如权利要求3所述的前端多语言加载适配方法,其特征在于,所述在所述本地存储中查找语言使用记录的步骤之后,包括以下步骤:
当所述本地存储中不存在语言使用记录时,获取所述目标浏览器的语言标识;
在预设的映射关系表中查找与所述语言标识具有映射关系的语言码;
定义所述语言码为用户语言。


5.如权利要求1所述的前端多语言加载适配方法,其特征在于,所述加载与所述用户语言相对应的语言文件的步骤,包括下述步骤:
获取所述目标浏览器的本地存储;
在所述本地存储中查找所述用户语言对应的语言文件;
当所述本地存储中存在所述语言文件时,加载所述语言文件;
当本地存储中不存在所述语言文件时,根据所述用户语言请求对应文件,加载所述对...

【专利技术属性】
技术研发人员:饶建兵杜岗
申请(专利权)人:广州市百果园信息技术有限公司
类型:发明
国别省市:广东;44

网友询问留言 已有0条评论
  • 还没有人留言评论。发表了对其他浏览者有用的留言会获得科技券。

1