IE11的UserAgent导致discuz发帖工具栏不出来

问题大概就是如标题所说,近期有一个社区用户反映无法发帖,编辑器的工具栏出不来。远程协助一下,发现他用的是IE11,最新的浏览器版本,帮他设置浏览器兼容模式后正常,确定是IE11的兼容问题。

为什么会出现这种问题呢,在IE11浏览器上简单看了下源码,发现这样一段代码:

而在正常的情况下,是没有display:none的属性的。

于是查找e_controls的位置,在编辑器的js文件editor.js文件发现这样一段代码:

function initEditor() {
if(BROWSER.other) {
$(editorid + ‘_controls’).style.display = ‘none’;
return;
}
… …
}

这段代码是编辑器的初始化代码,看样子是在初始化的时候判断为BROWSER.other,而直接设置e_controls隐藏了(不确定为何要这样做呢?)

那为什么会是BROWSER.other呢?我们接着找BROWSER的定义,在common.js的开头中我们找到了以下代码:

var BROWSER = {};
var USERAGENT = navigator.userAgent.toLowerCase();
browserVersion({‘ie’:’msie’,’firefox’:’’,’chrome’:’’,’opera’:’’,’safari’:’’,’mozilla’:’’,’webkit’:’’,’maxthon’:’’,’qq’:’qqbrowser’});

继续看browserVersion是如何定义的,还是在这个文件,找到browserVersion的定义:

function browserVersion(types) {
var other = 1;
for(i in types) {
var v = types[i] ? types[i] : i;
if(USERAGENT.indexOf(v) != -1) {
var re = new RegExp(v + ‘(\/|\\s)([\\d\.]+)’, ‘ig’);
var matches = re.exec(USERAGENT);
var ver = matches != null ? matches[2] : 0;
other = ver !== 0 && v != ‘mozilla’ ? 0 : other;
}else {
var ver = 0;
}
eval(‘BROWSER.’ + i + ‘= ver’);
}
BROWSER.other = other;
}

看到没?他遍历常见的几种浏览器,ie、firefox、chrome、opera、safari、mozilla、webkit、maxthon、qq,然后根据UserAgent的标识找出版本号,最后赋值给相应的BROWSER.xx;而如果找不到标识则other=1。

以上的代码很明显,在IE11的情况下是BROWSER.other=1,那为什么没有识别出IE11呢?这就是USERAGENT的问题了。

查看IE11的UserAgent,我们发现原来它的UserAgent是这样的:

“Mozilla/5.0 (Windows NT 6.1; Trident/7.0; rv:11.0) like Gecko”

原来如此,IE11的UserAgent并没有标明是MSIE,所以就出现了找不到浏览器标识的情况。

上网搜索了一下,果然发现IE11浏览器的UserAgent有了大的变化,据说IE11大大提升了JavaScript引擎的性能,执行速度明显快了很多。好吧,但愿这是一个好的改进。

找到了问题,改这个bug就不难了。有两种方法可以解决。一是修改browserVersion的参数,增加IE11的判定。另一种方案是直接移除initEditor中对BROWSER.other的处理。至于哪种更好,我也没有尝试,有兴趣的可以尝试下。

确实还不明白为什么BROWSER.other的时候把工具栏去掉呢,难道是后面的js代码兼容性问题?