`

引用外部JS文件的编码问题

    博客分类：
  • js
 
阅读更多

昨天帮同事解决的一个问题,GBK的页面(不要问我为什么GBK,因为GBK,所以GBK),引用了Google map的API, 但是由于GoogleMap API返回的js脚本是utf-8的,所以导致在IE下, 浏览器无法正确解析.

这个问题,总的来说,可以用下图描述(原谅我的美术水平):

问题图

问题图

也就是, 由于服务器中生成的HTML是基于gbk编码的, 并且由于Apache的DefaultCharset(后叙), 所以导致IE会以gbk编码去解析从外部引入的GoogleMap js,那肯定是不能正确解释的.

浏览器判断一个页面的编码有俩个途径, 一种是通过HTTP响应头,

    

  1. HTTP/1.x 200 OK
    2. 

  2. Date: Sat, 18 Oct 2008 21:53:51 GMT
    3. 

  3. Server: Apache/2.0.52 (Red Hat)
    4. 

  4. X-Powered-By: PHP/5.3.0alpha2
    5. 

  5. Connection: close
    6. 

  6. Transfer-Encoding: chunked
    7. 

  7. Content-Type: text/html; charset=GB2312
    8.

注意最后一行, 这个是由HTTP头部指明的页面编码格式.
另外一种就是我们常见的, 也会另很多初学者困惑的meta:

    

  1.   <head>

    2. 

  2.   <meta
 http-equiv
=
"Content-Type"
 content
=
"text/html; charset=UTF-8"
 />

    3. 

  3.   <title>
风雪之隅 </title>

    4. 

  4.   </head>

    5. 

  5.  
    6.

问题就在于,没有一个统一的标准,来指明这俩中方式的优先级, 不同的浏览器有着不同的优先级策略.这也就是为什么,我们在FF下正常浏览的页面,在IE下会乱码的原因.
我之前的文章Apache的Charset设置 中已经介绍过了在Apache下设置DefaultCharset以后产生的影响,

这个问题已经遇到过俩次了，就是页面中明确指明了编码是UTF8,但是显示是乱码。

虽然知道解决方法，也知道是Apache的原因，但是一直没有去找其所以然，今天趁机，就研究了一下。

1. 页面没有指定charset ， Apache配置defaultcharst gbk , 页面文件编码是utf-8

结果: 乱码，使用wireshark抓包，发现服务器返回的header中指明了:

    

  1. 
Content-Type
:
text/html
;
charset
=
GBK
    2.

结论：当页面没有指明charset的时候，Apache的defaultcharset起作用

2. 页面指定charset为utf-8, Apache配置defaultcharset gbk. 页面文件是utf-8

    

  1. 
<head>

    2. 

  2.         <meta
 http-equiv
=
"Content-Type"
 content
=
"text/html; charset=utf-8"
 />

    3. 

  3. 
</head>

    4. 

  4. 
<body>

    5. 

  5.         <div
 id
=
"page-header"
>

    6. 

  6.          测试Apache DefaultCharset
    7. 

  7.         </div>

    8. 

  8. 
</body>

    9. 

  9. 
</html>

    10.

结果还是出现乱码。

结论：当Apache配置了DefaultCharset, 将忽略页面的charset申明。

3 PHP header申明charset为utf8, Apache配置defaultcharst gbk,页面文件编码是utf8

    

  1. 
header
(
"Content-Type:text/html; charset=utf-8"
);

    2.

结果 ： 页面显示正常。

4 Apache设置DefaultCharset off

结果，页面显示正常。

翻阅了下Apache2的手册：

    

  1. AddDefaultCharset指令
    2. 

  2. 说明当应答内容是text/plain
或text/html
时，在HTTP应答头中加入的默认字符集
    3. 

  3. 语法AddDefaultCharsetOn|
Off|
charset
    4. 

  4. 默认值AddDefaultCharsetOff
    5. 

  5. 作用域serverconfig,
virtualhost,
directory,.
htaccess
    6. 

  6. 覆盖项FileInfo
    7. 

  7. 状态核心(
C)

    8. 

  8. 模块core
    9. 

  9.  
    10. 

  10. 当且仅当应答内容是text/plain
或text/html
时，此指令将会在HTTP应答头中加入的
    11. 

  11. 默认字符集。理论上这将覆盖在文档体中通过<
meta>
标 签指定的字符集，但是实际
    12. 

  12. 的行为通常取决于用户浏览器的设置。AddDefaultCharsetOff将会禁用此功能。 
    13. 

  13.  
    14. 

  14. AddDefaultCharsetOn将启用Apache内部的默认字符集iso-8859-1
。您
    15. 

  15. 也可以指定使用在IANA注册过的字符集名字 中的另外一个charset。
    16. 

  16. 比如说：
    17. 

  17. AddDefaultCharsetutf-8

    18.

也就是说，当Apache不指定defaultcharset的时候，页面编码由页面自己的meta标签指定。

当Apache指定的时候，将忽略页面中的meta标签指定的编码. 但是容许脚本直接header编码方式给客户端

最后，还有一个问题没有得出结果：

当Apache和页面都没有指定的时候， 又如何？

我在自己的机器上，如果都不指定， 默认还是utf8

在服务器端生成response内容以后, 如果脚本没有显示的调用header发送编码申明,那么Apache就会根据DefaultCharset生成响应HTTP头部的Content-type中的charset字段;
反之如果脚本显示申明了,那么就会按照脚本header申明中的charset设置.

这样到了浏览器端以后, 浏览器就可以根据HTTP头的charset申明来按照特定的编码格式解析获取到的HTML代码,但现在的问题是, 页面是GBK的,但是引用的外部js文件是utf8编码的,这样的情况, 我们可以使用一个script的属性来解决:

    

  1.   <script
 language
=
'javascript'
 
src
=
'....'
  
charset
=
'utf-8'
></script>

    2.


分享到：
| linux学习笔记-近期整理的linux命令
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    引用外部js乱码问题分析及解决方案

    在web开发中我们一般都会不可避免的使用js。...所以我们只需要同意页面和js编码就可以解决乱码问题： 对于GBK页面引用编码为UTF-8编码的JavaScript文件如果出现乱码问题，可以使用下面的代码来解决 代码如下: ＜s

    引入JS文件IE6报语法错误或缺少对象问题的解决方法

    这个问题在于文件编码上，如果JS文件编码与当前页面的编码不一致，就可能导致在IE6中页面不能正常获取和解析JS文件中的内容，在IE6中，默认引入的文件和页面的编码是一致的。在IE6+以上的浏览器中，一般浏览器会自动...

    文件编码转换/Screnc加解密/简繁转换 1.0

    文件编码转换/Screnc加解密/简繁转换 1.0 作者：Lael QQ：63778683 E-mail：xian_001@hotmail.com 使用注意： 1、使用前请备份，使用本软件造成的损失自负； 2、进行编码转换前请确认所有文件的源编码一致并选择...

    chrome打开共享文件夹完美方案

    在bat脚本里调用js，把文件【cmdOutput.txt】进行中文编码转换并输出到文件【cmdInput.txt】。 5.最后在bat脚本里根据文件【cmdInput.txt】里面的路径直接使用shexec"open"命令打开文件或文件夹。

    JavaScript完全自学宝典 源代码

    1.5.html HMTL中调用.js文件。 1.6.html 使用“”标记，实现的滚动字幕效果。 1.7.html 使用JavaScript实现简单的字幕滚动。 1.8.html 使用JavaScript实现字幕连续滚动。 1.9.html 使用...

    解决远程页面抓取中的乱码问题？

    由于平时使用的网页文件基本上都是gb2312编码方式，如果通过xmlhttp控件读取的话，肯定会出现乱码问题，但是要把所有文件都改成utf-8编码，操作上比较麻烦。经过反复比较，我找到了相对实用的解决方法。 ff提供了...

    geocode-interest-site:此python脚本下载外部文本文件中定义的一组兴趣点的坐标。 该脚本会调用一个外部程序，以将坐标从Google Maps参考系统投影到UTM。

    此python脚本下载外部文本文件中定义的一组兴趣点的坐标。 该脚本会调用一个外部程序，以将坐标从Google Maps参考系统投影到UTM。 以下python库是必需的，因此您应该安装计算机上不可用的库： json-数学-PyV8-...

    精通javascript

    • 1.3.htm 调用外部JavaScript文件 • 1.3.js 1.3.htm使用的外部JavaScript文件 第2章（\第2章） • 2.1.htm Infinity应用 • 2.2.htm NaN与isNaN()的用法 • 2.3.htm Infinity值...

    KODExplorer 芒果云-资源管理器

    [文件打开] office文件在线预览功能,服务器必须在公网(外部能访问该服务器) [忘记密码] 修改data/system/member.php 密码为明文的md5值 例如将admin密码重设为admin 则修改第一行："name":"admin","password":...

    34款经典Dreamweaver插件

    Text to SWF 类别：DW Command 把文档中选定的文字转换成SWF文件（奇妙的功能！） 增强DW的ASP+编码功能的插件 · ASP+ Dream 增强DW的ASP+编码功能的插件 ...根据分辨率不同载入不同的外部样式表

    文章管理系统

    上传图片和上传文件框加入编码指定，防止乱码出现 4.修复其他细节bug 2012年11月03日 ★更新方式：admin文件夹改成你后台目录名，然后补丁包里的所有文件覆盖进去。 1.纠正后台文章编辑时获取编辑器缩略图有时...

    JAVA上百实例源码以及开源项目

    6个目标文件，EJB来模拟银行ATM机的流程及操作：获取系统属性，初始化JNDI，取得Home对象的引用，创建EJB对象，并将当前的计数器初始化，调用每一个EJB对象的count()方法，保证Bean正常被激活和钝化，EJB对象是用...

    精通JavaScript

    • 1.3.htm 调用外部JavaScript文件 • 1.3.js 1.3.htm使用的外部JavaScript文件 第2章（\第2章） • 2.1.htm Infinity应用 • 2.2.htm NaN与isNaN()的用法 • 2.3.htm Infinity值...

    模块管理程序KSLITE.zip

    暂时不支持 use 外部 JS 文件，如 use("jquery.js");一些说明文件使用utf-8编码, 在合并到别的工程的时候手工编码转换使用方法约定禁止不加模块id, 不允许使用下面的形式// 文件及路径, test包下的math模块, 以下...

    javascript入门笔记

    3、将JS脚本编写在外部独立的JS脚本文件中(***.js) 步骤： 1、编写JS脚本文件 2、在HTML中引入脚本文件 [removed][removed] 练习： 1、先创建一个 base.js 的文件 2、在文件中执行以下代码 console.log(" ...

    精易官方免费模块v3.60版

    1.完善 “编码_URL编码”对 参数 欲编码的文本 是否为空进行判断 2.完善 “普通填表.网页_验证码同步”的备注,删除残留的测试代码 3.完善 “网页_禁止允许gif图片”“网页_禁止允许显示图片” “网页_禁止允许背景...

    JavaScript 组件之旅（二）编码实现和算法

    以后的某一天你决定要在现有的队列管理基本功能之上，添加一些新的扩展功能，或是把它包装成某个实现特定任务的组件，而又希望保持现有功能（内部实现）和调用方式（对外接口）不变，那么将新的代码写到单独的文件是...

    JAVA上百实例源码以及开源项目源代码

    6个目标文件，EJB来模拟银行ATM机的流程及操作：获取系统属性，初始化JNDI，取得Home对象的引用，创建EJB对象，并将当前的计数器初始化，调用每一个EJB对象的count()方法，保证Bean正常被激活和钝化，EJB对象是用...

    xheditor v1.0.0 rc2 build 100401

    修正：带面板的按钮包括插件，快捷键触发或者直接外部调用会产生错误问题的修正 修正：IE浏览器预览时，会跑至页面尾部问题的修正 修正：Firefox 3.6从源代码切换回来光标丢失问题的修正 修正：p和div标签内部的&...

    ASPCMS 开源企业网站建设系统 v2.6.6 GBK（直接使用版）.zip

    4.修复GBK版在后台设置UTF8模式时保存配置文件乱码 5.修改后台默认为全功能版本登陆 6.不再支持模板和编码设置不统一的杂交模式 7.utf8模板不再要求以.utf格式命名文件夹 8.修改在手机版关闭时生成静态不再加载...

Magicbox
Global site tag (gtag.js) - Google Analytics