今天项目组的同事反映,在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下加载失败的问题。

由easyui的tab在ie下渲染失败,发现的一个有意义的问题的更多相关文章

  1. 关于easyui的tab,layout,datagrid嵌套的问题

    我的项目使用easyui作为前台的展示框架现在页面中是一个layout布局(分上,左,中)在左边是一些菜单,点击后,在中间部分增加一个tab显示内容而增加的tab里面是显示一些列表数据,列表上面是查询 ...

  2. 雷林鹏分享:jQuery EasyUI 表单 - 创建树形下拉框

    jQuery EasyUI 表单 - 创建树形下拉框 树形下拉框(ComboTree)是一个带有下列树形结构(Tree)的下拉框(ComboBox).它可以作为一个表单字段进行使用,可以提交给远程服务 ...

  3. easyui的tab加载页面中的form重复提交

    http://blog.csdn.net/fxz1982/article/details/8987769 Easyui中的tabs组件以href方式加载目标页面,如果目标页面中有dialog或者win ...

  4. JQuery Easyui/TopJUI 创建多级联动下拉框(纯HTML实现!!!)

    JQuery Easyui/TopJUI 创建多级联动下拉框(纯HTML实现!!!) 效果展示: 代码如下: <form data-toggle="topjui-form"& ...

  5. easyui中Tab的tools按钮刷新当前tab

    easyui中Tab的tools按钮刷新当前tab 点击刷新按钮,刷新当前Tab选项卡. $('#index_tabs').tabs({ fit : true, border : false, too ...

  6. jquery Tab默认情况下自动切换

    <!DOCTYPE html><html lang="zh-CN"><head><meta http-equiv="Conten ...

  7. 第二百二十七节,jQuery EasyUI,ComboTree(树型下拉框)组件

    jQuery EasyUI,ComboTree(树型下拉框)组件 学习要点: 1.加载方式 2.属性列表 3.方法列表 本节课重点了解EasyUI中ComboTree(树型下拉框)组件的使用方法,这个 ...

  8. 第二百二十四节,jQuery EasyUI,ComboGrid(数据表格下拉框)组件

    jQuery EasyUI,ComboGrid(数据表格下拉框)组件 学习要点: 1.加载方式 2.属性列表 3.方法列表 本节课重点了解 EasyUI 中 ComboGrid(数据表格下拉框)组件的 ...

  9. EasyUI:年份、月份下拉框Demo

    EasyUI:年份.月份下拉框Demo jsp中定义: <td width="10%" height="25px" style="text-al ...

随机推荐

  1. LR连接oracle时出现:SQLState=28000[Oracle][ODBC][Ora]ORA-01017:invalid username/password;logon denied

    出现的现象:

  2. poj 2115 Looooops

    C Looooops Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 23637   Accepted: 6528 Descr ...

  3. CentOS VMware 配置IP小结 静态 配置 桥接 NAT

    系统启动后可先ping下外网或局域网内其它机器. 如果配置虚拟机时选择的NAT上网方式,后面需要配置固定IP,请先参见VMware NAT方式下设置静态IP获得可用的IP范围和网关等信息. 先将ifc ...

  4. C#开发微信公众平台-就这么简单(附Demo)(转)

    原文:http://www.cnblogs.com/xishuai/p/3625859.html 写在前面 阅读目录: 服务号和订阅号 URL配置 创建菜单 查询.删除菜单 接受消息 发送消息(图文. ...

  5. 20145223《Java程序设计》实验报告3

    20145223 实验三<敏捷开发与XP实践> 实验内容 使用git上传代码 使用git相互更改代码 实验步骤: 一.使用git上传代码 $ git push 1.找到需要push的文件所 ...

  6. css3 -- 过渡与动画

    1.注意使用前缀 2.属性: transition-property:none/all/属性 3.持续时间: transition-duration:默认值是0,即使是负值,按照0进行处理 4.tra ...

  7. 我的c++学习(4) C++输入输出格式的控制

    默认进制:默认状态下,数据按十进制输入输出.如果要求按八进制或十六进制输入输出,在cin或cout中必须指明相应的数据形式,oct为八进制,hex为十六进制,dec为十进制. #include &qu ...

  8. data.table包

    data.table 1.生成一个data.table对象 生成一个data.table对象,记为DT. library(data.table) :],V3=round(rnorm(),),V4=:) ...

  9. 转载:CSS计数器的趣味时光之css计算数据

    CSS计数器是“啊太好了,竟不知道CSS可以做这啊”这类非常有趣的众多特性之一.简言之,用CSS使你持续某增加某个量,而无需JavaScript. 简单计数器 我们从这个简单的分页示例开始: 你见到的 ...

  10. requestAnimationFrame制作动画:旋转风车

    在以往,我们在网页上制作动画效果的时候,如果是用javascript实现,一般都是通过定时器和间隔来实现的,出现HTML5之后,我们还可以用CSS3 的transitions和animations很方 ...