Html中引入JS文件乱码问题

乱码问题

在JS框架学习时,碰到了如下问题,在Html页面中引入的JS文件出现乱码,一开始以为是未指定默认的Html页面编码格式造成,但是通过head标签中<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> charset属性设置Html页面编码格式后,引入JS文件还是乱码,按照原本的理解如果JS是直接写在Html页面中,会按照页面编码的格式对其进行编解码,所以猜测如果是引用的话,也应该是按照这样的方式对JS文件进行编解码,但事实是如果未对引入的JS文件指定正确编码(默认JS文件编码方式与HTML页面编码不同情况下),则JS会按照其真正的文本存储编码方式进行编码,但解码时却是按照指定的HTML页面的编码进行解码,从而出现乱码问题。

解决方法

一番尝试后发现上述问题的出现是由于在引入JS文件时忽略了其中的一个charset属性,<script type="text/javascript" src="#" charset="gbk">,如要引入的JS文件的文本存储编码格式为GBK,Html页面指定的页面编码设置(采用如上文设置方式)为UTF-8,但是引入JS处指定编码charset属性为GBK则不会有乱码问题出现。

结论

在指定引入JS文本存储编码(charset属性)的情况下,浏览器会对JS文件按照charset解码JS文件;如果引入JS时未指定文本存储编码,则按照HTML页面指定的编码方式对JS文件解码,即浏览器是优先按照引入JS文件处指定的编码方式对JS文件进行解码的,

附Eclipse中设置JS文件默认编码

  • 方法1:window->Preferences打开属性页,General->Content Type,点击右边的Text,下面会出现.js(locked),选中.js(locked),在最下面的Default Encoding中写入utf-8,再点击update按钮即可。

  • 方法2:在工程上右键Properties。 选中Resource,在右边的Text file Encoding中点击Other,选utf-8即可,不推荐方法2, 除非你的其他代码都是utf-8的。