美文网首页AngularJs
使用angular开发的模块在IE8/9浏览器中不停刷新的问题

使用angular开发的模块在IE8/9浏览器中不停刷新的问题

作者: 飞将军 | 来源:发表于2015-01-07 12:01 被阅读249次

    出现问题的模块:
    燕麦企业云盘 后台管理购买中心

    通过不停注释代码, 我一步步缩小问题代码范围, 最终定位为IE8注册window的resize事件有问题

    有问题的代码:

    angular.module("commons.directives").directive("qyResize", [
        '$window',
        qyResize
    ]);
    
    function qyResize($window) {
        'use strict';
    
        return {
            restrict: 'EA',
            replace: false,
            transclude: false,
            link: function (scope, elem, attrs) {
                $(window).resize(function () {
                    location.reload();
                });
            }
        };
    }
    

    修复以后的代码:

    angular.module("commons.directives").directive("qyResize", [
        '$window',
        qyResize
    ]);
    
    function qyResize($window) {
        'use strict';
    
        return {
            restrict: 'EA',
            replace: false,
            transclude: false,
            link: function (scope, elem, attrs) {
    
                var winWidth = $(window).width(),
                    winHeight = $(window).height(),
                    resizeTimeout = null;
    
                $(window).resize(function () {
                    var onResize = function () {
                        //The method which alter some css properties triggers
                        //window.resize again and it ends in an infinite loop
                        location.reload();
                    };
    
                    //New height and width
                    var winNewWidth = $(window).width(),
                        winNewHeight = $(window).height();
    
                    // compare the new height and width with old one
                    if (winWidth != winNewWidth || winHeight != winNewHeight) {
                        window.clearTimeout(resizeTimeout);
                        resizeTimeout = window.setTimeout(onResize, 10);
                    }
                    //Update the width and height
                    winWidth = winNewWidth;
                    winHeight = winNewHeight;
                });
            }
        };
    }
    

    这个问题是因为IE8的resize事件触发有问题, 它在刚进入页面时一定会触发该事件.

    angular版本的登录和注册功能没有问题是因为他们中没有用到qy-resize

    相关文章

      网友评论

        本文标题:使用angular开发的模块在IE8/9浏览器中不停刷新的问题

        本文链接:https://www.haomeiwen.com/subject/uzgtxttx.html