在浏览器中返回时,不会调用modernizr

时间:2013-11-18 15:25:51

标签: javascript jquery

使用移动网站时,我看到了使用modenizr的奇怪行为。如果我回到浏览器,我似乎永远不会使用Modenizr完成整个功能。它最初被调用,但是当查看另一个页面然后单击后退按钮时,它不会被调用。是否存在某种我需要覆盖的缓存?

首次加载页面时,我只会看到“初始化应用”。

jquery的:

 $(document).ready(function() {

    console.log("Loading Main...");

    loadMain();


    function loadMain() {

       console.log("Calling modenizr");

        Modernizr.load([
            {
             load: [
                    'http://localhost/js/main-test.js'
                ],
                complete: function()
                {
                    $.fn.ready(function()
                    {
                        window.App.init();

                    });
                }
            }
        ]);
    }
});

主test.js

(function(window, document, undefined) {

var transformProp = window.Modernizr.prefixed('transform'),
    transitionProp = window.Modernizr.prefixed('transition'),
    transitionEnd = (function() {
        var props = {
            'WebkitTransition' : 'webkitTransitionEnd',
            'MozTransition'    : 'transitionend',
            'OTransition'      : 'oTransitionEnd otransitionend',
            'msTransition'     : 'MSTransitionEnd',
            'transition'       : 'transitionend'
        };
        return props.hasOwnProperty(transitionProp) ? props[transitionProp] : false;
    })(),

    hasTT = transitionEnd && transitionProp && transitionProp;

var log = function(obj)
{
    if (typeof window.console === 'object' && typeof window.console.log === 'function') {
        window.console.log(obj);
    }
};

window.App = (function()
{

    console.log("Inititializng app");

    var _init = false, app = { };

    app.init = function()
    {

        if (_init) {
            return;
        }
        _init = true;


        app.win    = $(window);
        app.docEl  = $(document.documentElement);
        app.bodyEl = $(document.body);

        app.docEl.addClass('js-ready js-' + (hasTT ? 'advanced' : 'basic'));

        var menuLinkEl = $('#menu-link'),
            menuEl = $('#menu'),
            wrapEl = $('#wrap');

        var closeMenu =function()
        {
            if (hasTT) {
                menuEl.one(transitionEnd, function(e) {
                    app.docEl.removeClass('js-offcanvas');
                });
            } else {
                app.docEl.removeClass('js-offcanvas');
            }
            app.docEl.removeClass('js-menu');
        };

        var openMenu = function()
        {
            app.docEl.addClass('js-offcanvas js-menu');
        };

        menuLinkEl.on('click', function(e)
        {
            console.log("Clicked");

            if (app.docEl.hasClass('js-menu')) {
                closeMenu();
            } else {
                openMenu();
            }
            e.preventDefault();
        });



    };

    return app;

})();

})(window, window.document);

1 个答案:

答案 0 :(得分:0)

使用空函数添加onunload body属性来修复它。