由easyui的tab在ie下渲染失败，发现的一个有意义的问题

最新推荐文章于 2019-12-04 11:48:42 发布

程序员一一涤生

最新推荐文章于 2019-12-04 11:48:42 发布

阅读量162

点赞数

本文链接：https://blog.csdn.net/anaijiabao/article/details/100721360

版权

今天项目组的同事反映，在IE浏览器下，所有用easyui编写的tab控件都加载不出来，只会显示一个Loading的提示在控件的内容显示区。

刚分析这个问题，首先怀疑是使用easyui的tab的脚本写法哪里不对了，于是改了好几遍别的写法，甚至直接使用html标签的形式加载tab控件，都还是出现一样的问题，在ie下就是加载不出来，chrome等浏览器都是正常的；后来想可能是受到别的地方有什么脚本的影响，或者是源代码哪里出问题了，于是将一个运行正常的项目的相关前段代码拿过来全部替换，但是发现依然不行，之后我又将有问题的项目中的加载tab控件的代码所在的文件放到正常的项目中运行，发现也是正常的，这下就非常奇怪了，等于2个项目的前段代码一模一样，但是tab控件的渲染在其中一个项目里就是不行，而且是在该项目里的所有使用了tab控件的地方都有问题。这时项目组的同事突然说了一句：“我好像也改了一下filter中的东西，但是那个是后台的代码，怎么也不会影响到前台的easyui的脚本解析吧？”，我想了一下当时也觉得不会影响，但是实在没有别的思路了，就死马当活马医，试试看呗，于是将filter中修改的代码注释掉，在运行代码，结果发现问题没有了，tab控件正常加载！

好奇怪啊，filter中能有什么东西会导致easyui的tab控件仅仅在ie下加载失败呢？

后来细细想了一下，也查询了相关资料，终于得出了答案：

filter中的那段配置代码的内容是使用spring的CharacterEncodingFilter类对请求进行UTF8的编码，并且配置了forceEncoding的值为true，而且过滤所有的请求,该编码配置的意思是对所有请求采用utf8编码，由于配置了forceEncoding的值为true，对所有的响应也会采用utf8编码。

细心的朋友可能已经发现，这里写的是utf8而不是utf-8,没错IE浏览器是不认识utf8的，它只认识utf-8，但是chrome等浏览器是认识utf8的。

那问题又来了，如果是这个原因，为什么只有加载easyui的tab控件的时候会出问题，应该是加载所有html页面都会出问题啊？

原因是这样的，easyui的tab控件中加载的内容也是一个html，但是这个html的内容要求只能写<body></body>里的标签，所以该html页面上不能指定charset=UTF-8,而其它正常的html页面都会在<meta>标签中加入这个属性，当IE浏览器解析response头中的内容准备使用utf8来解析页面的时候，如果发现meta中也配置了charset，那么就会使用meta中的编码，如果没有发现该配置，就使用response头中content-type的charset指定的编码，所以就导致了easyui的tab控件仅仅在ie下加载失败的问题。