码迷,mamicode.com
首页 > 其他好文 > 详细

浏览器编码问题

时间:2016-02-23 18:24:35      阅读:137      评论:0      收藏:0      [点我收藏+]

标签:

浏览器在解析HTML时,是按照一定的格式和编码来解析的,为了不扰乱HTML结构,有HTML编码(比如:<对应&lt;);为了 不扰乱JS的语法,有JS编码(比如:‘对应\‘),为了正常解析URL,有URL编码(比如:&对应%26)。总结起来也就三类,但是有不同的 编码形式。

1.1.1 HTML编码

HTML编码形式最常见的有三种:别名形式、16进制形式、10进制形式,比如:<>"‘采用这三种方式编码后分别如下:

别名形式:&lt;&gt;&quot;&apos;

16进制形式:&#x3c;&#x3e;&#x22;&#x27;

10进制形式:&#60;&#62;&#34;&#39;

HTML编码的这几种方式可以混合出现,浏览器都可以正常解析。

1.1.2 JS编码

JS编码形式最常见的有四种:斜杠转义形式、16进制形式、Unicode编码形式。<>"‘采用这几种方式编码后分别如下:

斜杠转义形式:\<\>\"\‘

16进制形式:\x3c\x3e\x22\x27

Unicode编码形式:\u003c\u003e\u0022\u0027

这几种方式也可以混合出现。需要指出的是,一般的斜杠转义形式不对字母、数字进行转义,因为可能出现混乱的情况,比如:\x\3\c并不会按想象中那样解析成x3c,而是会报语法错误。

1.1.3 URL编码

URL编码估计大家都非常熟悉,编码都采用%XX的形式,比如同样的<>"‘经URL编码后得到%3C%3E%22%27。

URL编码需要注意的是,只需对URL中的参数值进行编码,比如:http://xxx.com?p1=%3C%3E%22%27,浏览器可以正常识别出url和参数。

技术分享
如果对整个URL都编码,浏览器是无法识别的,将作为相对路劲识别,见下图。

技术分享

1.2 编码位置

HTML页面中我们可以按照指定的编码格式去编码,但是,必须符合浏览器的解码规则和顺序,否则浏览器也无法识别。

1.2.1 HTML编码适用位置

HTML编码适用于属性值、标签内的内容,看如下示例:

技术分享

浏览器解析后如下图:

技术分享
 

可以看到:

1、  标签内使用html编码,被解析出来了,并且不影响DOM结构。

2、  属性值使用html编码,被解析出来了,并且在url、js事 件、css中也是如此。

3、  属性名使用html编码,没有被解析出来。

但是,在<script>标签内的js内容以及<style>中的css内容,浏览器是不会使用html编码解码的:

技术分享
技术分享

1.2.2 JS编码适用位置

JS编码则只适用于JS代码中,包括<script>内和JS事件中:

技术分享
 

1.2.3 URL编码使用位置

URL编码则只适用于为URL的属性值,且只能对URL中的参数进行URL编码。比如:<a>标签的href属性、<iframe>的src属性等。

1.3 解码顺序

既然各个编码有适合自己的位置,并且这种位置必定会重合,所以,浏览器解码必定有一定的顺序。一般的解码顺序为:html解码 > URL解码 > JS解码,看一个简单的例子:

技术分享
这个示例中,<a>的href属性值是一段js代码,所以,这里会涉及到三种解码:html解码、URL解码、JS解码。按照上面说的顺序,浏览器先做html解码,html解码后如下:

技术分享
         之后再做url解码,解码后如下:

技术分享
 

         最后再做js解码,所以最终弹窗的内容应该是‘‘xxx。实际弹窗的内容也是这样的。

技术分享
 

浏览器编码问题

标签:

原文地址:http://www.cnblogs.com/neoiol/p/5210767.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!