bootstrap-datetimepicker.js与IE8的兼容问题

来源:互联网 发布:田丰 阿里云 编辑:程序博客网 时间:2024/06/05 15:22

bootstrap是当下非常受欢迎的响应式布局的框架,可以帮助我们快速的构建web应用,之前在使用bootstrap的时候,使用到了日期时间选择控件(datetimepicker),由于是自己使用的,也没有过多的关注兼容性问题,今天心血来潮,用IE8测试了一下,我的天哪,居然无法正常使用,随即上网搜了一下,看看有没有类似的问题,还别说,一搜一大堆,当我看完几个之后,就不想再继续看了,千篇一律的文章,你们懂的,而且还无法解决我的问题,不知道只不是由于版本的问题,我现在使用提供的是官网上最新的版本。
我在网上看到的问题基本上都是说bootstrap-datetimepicker.js脚本里不支持indexOf()这个方法,所以提供的解决方法是在脚本里面添加类似如下的代码:

if (!Array.prototype.indexOf)   Array.prototype.indexOf = function(elt /*, from*/)   {     var len = this.length >>> 0;     var from = Number(arguments[1]) || 0;     from = (from < 0)          ? Math.ceil(from)          : Math.floor(from);     if (from < 0)       from += len;     for (; from < len; from++)     {       if (from in this &&           this[from] === elt)         return from;     }     return -1;   }; 

但是我在bootstrap-datetimepicker.js文件中,看到作者已经修复了这个问题,有图有真相:

这里写图片描述

所以根本就不是这个原因导致的,最终无奈,还是老老实实的调试吧。工具可以用IETester,但是我今天发现IE新版自带的开发者工具还是挺好用的,可以直接切换IE版本进行测试,打开开发者工具并且换成IE8.

这里写图片描述

然后刷新页面,观察控制台信息

这里写图片描述

这里写图片描述

我们可以欣喜地发现,在timeZoneAbbreviation函数中出现了错误,到这里,我们已经知道问题了,就是ref.slice(0, -1)出现错误了,原因为ref未定义或为null,相信很多人会和我一样有疑问,前面不是已经判断null了吗,怎么还会出错,我们可以继续探索一下,看一看date = (new Date()).toString();执行后date的值到底是什么,通过控制台,我们可以很容易的监测道具体的值

这里写图片描述

在该处加个断点,切换IE的版本,将其更改为Edge,也是当前最新的版本,刷新页面再次观察。

这里写图片描述

我们可以看到两次的结果并不相同,这样就能解释通为何IE8会出现错误了,因为将日期转换为字符串后不包含(中国标准时间)部分,所以date.split('(')[1]的值为未定义,即ref的值为未定义,故而调用slice方法时出现错误,解决方法很简单,我们只需要修改判断逻辑即可,将该句修改为如下形式:

formattedStr = ((ref = date.split('(')[1]) ? ref.slice(0, -1) : 0) || date.split(' ');

这样,在IE8中也可以正常运行啦。

4 0