解决JS外部文件中文注释出现乱码问题


Posted in Javascript onJuly 09, 2017

问题描述

中文乱码在Java Web开发中经常出现,这是由于不同的部分编码不一样造成的,一般在开发中,我们把所有能设编码的地方,全部设置成UTF-8,但是有时候还是会出现乱码的情况。在开发中,一般把js代码从html中抽出来,放到一个js文件中,js文件中包含中文,在浏览器中页面没有出现乱码,一切正常,当我们打开源码点进js文件,我们发现js文件中的中文注释和js代码中的中文全是乱码。

问题原因 

我们没有告诉浏览器,当前的文件使用何种编码,浏览器默认使用的的GBK编码,但是我们js文件使用的UTF-8的编码,当然会出现乱码了,有的同学会问了,为什么页面没有出现,那是因为我们在页面里面加上以下代码:

<meta content="text/html; charset=UTF-8" http-equiv="content-type">

或者:

<meta charset="utf-8">

这就告诉了浏览器,你用UTF-8来渲染这个页面,我们这个页面是用UTF-8来编码的,这个时候就是正常显示的。或者是在Java代码中使用下面的代码:

response.setContentType("text/html;charset=UTF-8");

这也是相当于告诉浏览器,当前使用的UTF-8编码。

解决方案

聪明的同学已经想到了,我们要告诉浏览器,当前文件的编码格式,在页面中,我们可以使用上面的三种方式来告诉浏览器当前页面的编码,但是在js文件中,使用不了。咋办?其实很简单,我们可以在web.xml中,使用一个过滤器,来对所有的的响应设置编码格式为UTF-8:

<filter>
    <filter-name>encodingFilter</filter-name>
    <filter-class>org.springframework.web.filter.CharacterEncodingFilter</filter-class>
    <init-param>
      <param-name>encoding</param-name>
      <param-value>UTF-8</param-value>
    </init-param>
    <init-param>
      <param-name>forceEncoding</param-name>
      <param-value>true</param-value>
    </init-param>
  </filter>
  <filter-mapping>
    <filter-name>encodingFilter</filter-name>
    <url-pattern>/*</url-pattern>
  </filter-mapping>

上面的过滤器,对所有的请求响应设置的编码为UTF-8。

清除一下浏览器缓存,刷新一下,我们发现已经能够正确的显示中文了。

说明一下,前提是所有的文件编码是UTF-8。

以上所述是小编给大家介绍的解决JS外部文件中文注释出现乱码问题,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!

Javascript 相关文章推荐
Javascript 读后台cookie代码
Sep 15 Javascript
JQuery文本框高亮显示插件代码
Apr 02 Javascript
JS简单实现登陆验证附效果图
Nov 19 Javascript
JQuery为页面Dom元素绑定事件及解除绑定方法
Apr 23 Javascript
jquery简单图片切换显示效果实现方法
Jan 14 Javascript
为什么JS中eval处理JSON数据要加括号
Apr 13 Javascript
JQuery实现超链接鼠标提示效果的方法
Jun 10 Javascript
详解JavaScript ES6中的模板字符串
Jul 28 Javascript
JS实现图片的不间断连续滚动的简单实例
Jun 03 Javascript
Avalonjs双向数据绑定与监听的实例代码
Jun 23 Javascript
vue使用v-if v-show页面闪烁,div闪现的解决方法
Oct 12 Javascript
一个小时快速搭建微信小程序的方法步骤
Apr 15 Javascript
JavaScrpt中如何使用 cookie 设置查看与删除功能
Jul 09 #Javascript
jQuery封装placeholder效果实现方法,让低版本浏览器支持该效果
Jul 08 #jQuery
jQuery制作全屏宽度固定高度轮播图(实例讲解)
Jul 08 #jQuery
详谈javascript精度问题与调整
Jul 08 #Javascript
javascript定时器取消定时器及优化方法
Jul 08 #Javascript
Javascript 一些需要注意的细节(必看篇)
Jul 08 #Javascript
JQuery 获取Dom元素的实例讲解
Jul 08 #jQuery
You might like
PHP4与PHP3中一个不兼容问题的解决方法
2006/10/09 PHP
PHP文件上传判断file是否己选择上传文件的方法
2014/11/10 PHP
利用PHP命令行模式采集股票趋势信息
2016/08/09 PHP
php将html转为图片的实现方法
2017/05/19 PHP
利用Laravel生成Gravatar头像地址的优雅方法
2017/12/30 PHP
PHP7如何开启Opcode打造强悍性能详解
2018/05/11 PHP
JS处理VBArray的函数使用说明
2008/05/11 Javascript
JavaScript的递归之递归与循环示例介绍
2013/08/05 Javascript
JavaScript计时器示例分析
2015/02/05 Javascript
JavaScript中使用Object.prototype.toString判断是否为数组
2015/04/01 Javascript
JavaScript中字符串分割函数split用法实例
2015/04/07 Javascript
JavaScript的removeChild()函数用法详解
2015/12/27 Javascript
Jquery遍历select option和添加移除option的实现方法
2016/08/26 Javascript
微信小程序与php 实现微信支付的简单实例
2017/06/23 Javascript
微信小程序对接七牛云存储的方法
2017/07/30 Javascript
ajax前台后台跨域请求处理方式
2018/02/08 Javascript
微信小程序实现单选选项卡切换效果
2020/06/19 Javascript
vue组件 keep-alive 和 transition 使用详解
2019/10/11 Javascript
JS正则表达式验证端口范围(0-65535)
2020/01/06 Javascript
Python函数式编程指南(二):从函数开始
2015/06/24 Python
python3 自动识别usb连接状态,即对usb重连的判断方法
2019/07/03 Python
Python 给定的经纬度标注在地图上的实现方法
2019/07/05 Python
Python学习笔记之lambda表达式用法详解
2019/08/08 Python
python脚本实现音频m4a格式转成MP3格式的实例代码
2019/10/09 Python
python匿名函数的使用方法解析
2019/10/10 Python
浅析pip安装第三方库及pycharm中导入第三方库的问题
2020/03/10 Python
完美解决Django2.0中models下的ForeignKey()问题
2020/05/19 Python
Python3爬虫关于识别检验滑动验证码的实例
2020/07/30 Python
Amcal中文官网:澳洲综合性连锁药房
2019/03/28 全球购物
澳大利亚和新西兰最大的在线旅行社之一:Aunt Betty
2019/08/07 全球购物
Linux不知道文件后缀名怎么判断文件类型
2014/08/21 面试题
自强之星事迹材料
2014/05/12 职场文书
2014年银行员工年终自我评价
2014/09/19 职场文书
2015年教师新年寄语
2014/12/08 职场文书
病危通知单
2015/04/17 职场文书
经典哲理警句:志不真则心不热,心不热则功不贤
2019/11/14 职场文书