IE瀏覽器升級到了IE11，在項目中發現，在IE11下使用kindeditor的文字顏色、文字背景、上傳圖片等只要是彈出框的按鈕都不能彈出框，如下圖：
仔細觀察發現其實是已經彈出框了，只是沒有在正確的位置現實罷了，仔細查看了kindeditor.js的代碼，發現了幾個問題：
js的開頭定義了幾個變量：
var _VERSION = '4.1.7 (2013-04-21)',
_ua = navigator.userAgent.toLowerCase(),
_IE = _ua.indexOf('msie') >-1 && _ua.indexOf('opera') == -1,....
經過測試發現，在IE8下，navigator.userAgent的值是這樣的：
而在IE11下，navigator.userAgent的值是這樣的：
所以通過_ua.indexOf('msie') > -1 的方式在IE11下判斷是否為IE瀏覽器就行不通了。
往下看代碼，發現_getScrollPos這個方法中的x y是通過判斷是否為IE瀏覽器獲取位置
function _getScrollPos(doc) {
doc = doc || document;
var x, y;
if (_IE || _OPERA) {
x = _docElement(doc).scrollLeft;
y = _docElement(doc).scrollTop;
} else {
x = _getWin(doc).scrollX;
y = _getWin(doc).scrollY;
}
return {x : x, y : y};
}
在往下看
pos : function() {
var self = this, node = self[0], x = 0, y = 0;
if (node) {
if (node.getBoundingClientRect) {
var box = node.getBoundingClientRect(),
pos = _getScrollPos(self.doc);
x = box.left + pos.x;
y = box.top + pos.y;
} else {
while (node) {
x += node.offsetLeft;
y += node.offsetTop;
node = node.offsetParent;
}
}
}
return {x : _round(x), y : _round(y)};
},
這里的pos = _getScrollPos(self.doc);
x = box.left + pos.x;
y = box.top + pos.y;
三句確定了pos的x 和 y
再來看一下createmenu方法：
createMenu : function(options) {
var self = this,
name = options.name,
knode = self.toolbar.get(name),
pos = knode.pos();
options.x = pos.x;
options.y = pos.y + knode.height();
options.z = self.options.zIndex;
options.shadowMode = _undef(options.shadowMode, self.shadowMode);
if (options.selectedColor !== undefined) {
options.cls = 'ke-colorpicker-' + self.themeType;
options.noColor = self.lang('noColor');
self.menu = _colorpicker(options);
} else {
options.cls = 'ke-menu-' + self.themeType;
options.centerLineMode = false;
self.menu = _menu(options);
}
return self.menu;
},
根據以上代碼，我得出一個判斷是否為IE瀏覽器成為解決本問題的根本解決方案。
但是如果改成這樣：
_IE = (_ua.indexOf('msie') > -1 || _ua.indexOf('trident') > -1) && _ua.indexOf('opera') == -1,
又會出現不支持attachEvent方法，附上代碼：
if (_IE) {
window.attachEvent('onunload', function() {
_each(_eventData, function(key, events) {
if (events.el) {
_unbind(events.el);
}
});
});
}
所以我這樣解決：
第一步：定義變量：_IE11 = _ua.indexOf('trident') > -1 代碼如下
var _VERSION = '4.1.7 (2013-04-21)',
_ua = navigator.userAgent.toLowerCase(),
_IE = _ua.indexOf('msie') > -1 && _ua.indexOf('opera') == -1,
_IE11 = _ua.indexOf('trident') > -1,.....
第二部：增加判斷
function _getScrollPos(doc) {
doc = doc || document;
var x, y;
if (_IE || _IE11 || _OPERA) {
x = _docElement(doc).scrollLeft;
y = _docElement(doc).scrollTop;
} else {
x = _getWin(doc).scrollX;
y = _getWin(doc).scrollY;
}
return {x : x, y : y};
}
這樣彈出框就可以正確彈出了，如下圖：
測試過程中，需要找出所引用的kindeditor的js 文件，對應的去更新，我本地的是4.1.4版本的，改寫如下：
找到navigator.userAgent.toLowerCase(),行，加入IE11的判斷
_NEWIE = -1 == _ua.indexOf("msie") && _ua.indexOf("trident") > -1,
再找到scrollLeft獲取滾動的左邊距
增加
function Z(a) {
var a = a || document,
b;
o || _NEWIE || Ma ? (b = I(a).scrollLeft, a = I(a).scrollTop) : (b = T(a).scrollX, a = T(a).scrollY);
return {
x: b,
y: a
}
}