IE11兼容性实战-优快云博客

2019独角兽企业重金招聘Python工程师标准>>>

年后换工作，一直不稳定，我就没有正式写过程序，博客也荒芜了。最近才正式接手工作，遇到很多奇葩的领导，总有很多奇葩的想法和理念。比如不让用jquery,不过要求兼容ie11和chrome ff,就行。放弃jquery开始感觉很难，写了两天，也还行。我先用jquery实现的功能，然后替换里面几个方法即可，无非就是查找，添加class等！

在控制台先测试好，直接使用就行了，但遇到以下问题，简单记一下：

0、项目引用了prism.js来加亮代码。高亮后，IE11非常的卡，无法滚动，按F12查看性能，要2秒多去渲染一屏，这和JS无关了。我以为是元素过多，IE性能太差的原因。后来偶然把prism.css文件去掉，结果瞬间显示出来。先想肯定是阴影或变形引起的吧，就把css中的shadow去掉，还不行。就一块块的去CSS代码。在把透明度去掉，就好了！

.namespace {
    opacity: .7;  /*该行引起IE11的性能极大的下降，禁用！*/
}

1、IE11不允许classList.add 多个参数。chrome,ff都可以这样：tag.classList.add("xbrl-selected animate");

写两遍就是了！

2、IE11中，在主界面中，获取了iframe初始的contentWindow后，如果再往里写入一个新页面，那么这个已经获取的window就无效了。执行它的脚本会提示“不能执行已释放 Script 的代码” 。

这个问题也好理解，因为我是往里写了完整的页面：<html> ......</html>此时浏览器重新生成了一个新的window对象嘛！

加一句话：if (!!window["ActiveXObject"] || "ActiveXObject" in window) this.init("再绑定一次");

这个在chrome ff中，不存在window失效问题。

3、获取窗体滚动条的位置，IE11不支持window.scrollY，需要去其它属性找。

解决办法：window.scrollY || window.pageYOffset || document.documentElement.scrollTop

4、在IE11里访问iframe时，document.getElementById("frm") 和直接用 frm，得到完全不同的东西。

document.getElementById("frm") 返回标签，之后用 contentWindow去访问它。

frm得到的竟然直接是一个window对象，我的个天呀！在chrome，ff中，可不是这样，我还没有去百度原因，不知道有没有什么说法没有。

解决办法：统一用document.getElementById("frm")

5、动画编写。

以前很少写动画的功能，一是没必要太花哨，二是用css3有时能解决一下问题（虽然css3我也不熟，今天才动手实践了一下）。

这次要滚动一下body，我想这个就完全不能用css3了吧，那就动手写一个定时计算吧，总要动手做一次嘛！

/**动画的参数 */
interface IAnimateConfig {
    /**起始值 */
    from: number;
    /**终值 */
    to: number;
    /**延时  s*/
    delay?: number;
    /**持续时间  s*/
    duration?: number;
    /**动画效果 */
    timingFunction?: string; //linear|easeIn|easeOut|easeInOut
}
/**几个常用的效果  借用了TWEEN的代码，详见：https://www.oschina.net/code/snippet_942854_19980 */
var animFun = {
        linear: function (start, alter, curTime, dur) {
            return start + curTime / dur * alter;
        },
        easeIn: function (start, alter, curTime, dur) {
            return start + Math.pow(curTime / dur, 2) * alter;
        },
        easeOut: function (start, alter, curTime, dur) {
            var progress = curTime / dur;
            return start - (Math.pow(progress, 2) - 2 * progress) * alter;
        },
        easeInOut: function (start, alter, curTime, dur) {
            var progress = curTime / dur * 2;
            return (progress < 1 ? Math.pow(progress, 2) : -((--progress)
                * (progress - 2) - 1))
                * alter / 2 + start;
        }
    };
/**动画函数*/
animate(config: IAnimateConfig, action: (value: number) => void) {
        var opt: IAnimateConfig = { from: 0, to: 0, delay: 0, duration: 1, timingFunction: 'linear' };
        for (var p in config) opt[p] = config[p];

        if (opt.from == opt.to) return;
        var begin = +new Date() + opt.delay * 1000, end = begin + opt.duration * 1000, last = +new Date();
        var tick = function () {
            if (last >= begin && last <= end) {
                //此处是过渡值计算公式
                //var v = opt.from + (opt.to - opt.from) * (last - begin) / (end - begin);
                var v = animFun[opt.timingFunction](opt.from, opt.to - opt.from, last - begin, end - begin);
                action(v);
            }
            if (last > end) {
                action(opt.to);
                return;
            }
            last = +new Date();
            requestAnimationFrame(tick);
        };
        tick();
    }
/**动画的调用*/
animate({
            from: scrollY || pageYOffset,
            to: tag.offsetTop,
            delay:0.2,
            duration:1,
            timingFunction: 'easeInOut'
        }, (v) => win.scrollTo(0, v));

自己写完这个animate函数，心情很愉悦。这才是我想要的动画函数嘛！若要加强一下，就添加一个完成事件即可！

注意：上面代码是我用Typescript写好的，原是放在类里面的，现在摘了代码出来，没有测试！

转载于:https://my.oschina.net/u/1540190/blog/908015