记跨浏览器开发的案例

讲之前：由于目前公司的项目开发时间比较早，大概十几年前的东东了。最开始只支持IE，还是IE低版本，IE8、9、10、11、Edge都会有点问题。需求开发完后，做浏览器适配时候，主要是要兼容IE8-11，chrome，firfox，当然还有国产浏览器如360、qq、搜狗等。现总结下遇到的问题及解决方案。

1.eval(idName)
问题：IE、Chrome浏览器下都可以使用eval(idName)或getElementById(idName)来取得id为idName的HTML对象；firefox下只能使用getElementById(idName)来取得id为idName的HTML对象.
解决方案：统一使用getElementById(idName)来取得id为idName的HTML对象

2.ActiveXObject对象未定义
问题：IE下支持用var obj = new ActiveXObject() 的方式创建对象，但其它浏览器都会提示ActiveXObject对象未定义
解决方案：
1>在使用new ActiveXObject()之前先判断浏览器是否支持ActiveXObject对象，以创建AJAX对象为例：

if(window.ActiveXObject){
    this.req=new ActiveXObject("Microsoft.XMLHTTP");
}
else if(window.XMLHttpRequest){
    this.req=new XMLHttpRequest();
}

2>使用jquery的ajax对象

3.XML操作
问题:装载xml文档使用ActiveXObject对象，但除非IE外，其它浏览器都不支持此方法。XML文档操作，IE和其它浏览器也存在不同，通常取XML对象的XML文本的方法是xml.documentElement.xml，但xml属性只有IE支持，其它浏览器均不支持。查找节点是常用的方法有selectNodes和selectSingleNode，这两个方法也只有IE支持，其它浏览器需要自己扩展。
解决方案：装载XML文档：用$.ajax()

4.window.execScript()
问题：除IE外都不支持window.execScript()方法，但是都支持window.eval()方法
解决方案：统一使用window.eval()方法

5.window.createPopup()未定义
问题：创建一个弹出窗口的方法，IE支持此方法，FireFox、Chrome都不支持，使用时会提示createPopup方法未定义
解决方案：使用之前判断是否支持window.createPopup()方法，不支持时使用原型扩展该方法。具体代码如下：

if (!window.createPopup) {
    var __createPopup = function () {
        var SetElementStyles = function (element, styleDict) {
            var style = element.style;
            for (var styleName in styleDict) 
                style[styleName] = styleDict[styleName];
        }
        var eDiv = document.createElement('div');
        SetElementStyles(eDiv, { 'position': 'absolute', 'top': 0 + 'px', 'left': 0 + 'px', 'width': 0 + 'px', 'height': 0 + 'px', 'zIndex': 1000, 'display': 'none', 'overflow': 'hidden' });
        eDiv.body = eDiv;
        var opened = false;
        var setOpened = function (b) {
            opened = b;
        }

        var getOpened = function () {
            return opened;
        }

        var getCoordinates = function (oElement) {
            var coordinates = { x: 0, y: 0 };
            while (oElement) {
                coordinates.x += oElement.offsetLeft;
                coordinates.y += oElement.offsetTop;
                oElement = oElement.offsetParent;
            }
            return coordinates;
        }
        return {
            htmlTxt: '',
            document: eDiv,
            isOpen: getOpened(),
            isShow: false,
            hide: function () {
                SetElementStyles(eDiv, { 'top': 0 + 'px', 'left': 0 + 'px', 'width': 0 + 'px', 'height': 0 + 'px', 'display': 'none' });
                eDiv.innerHTML = '';
                this.isShow = false;
            },
            show: function (iX, iY, iWidth, iHeight, oElement) {
                if (!getOpened()) {
                    document.body.appendChild(eDiv); setOpened(true);
                };
                this.htmlTxt = eDiv.innerHTML;
                if (this.isShow) {
                    this.hide();
                };
                eDiv.innerHTML = this.htmlTxt;
                var coordinates = getCoordinates(oElement);
                eDiv.style.top = (iX + coordinates.x) + 'px';
                eDiv.style.left = (iY + coordinates.y) + 'px';
                eDiv.style.width = iWidth + 'px';
                eDiv.style.height = iHeight + 'px';
                eDiv.style.display = 'block';
                this.isShow = true;
            }
        }
    }
    window.createPopup = function () {
        return __createPopup();
    }
}