Modernizr.前缀(不是一个函数)在Magento

Modernizr.prefixed (is not a function) in Magento

本文关键字:一个 函数 Magento 前缀 Modernizr      更新时间:2023-09-26

我试图在万磁王cms页面上运行脚本。控制台响应:

Uncaught TypeError: Modernizr。前缀不是函数

奇怪的是,这个脚本在正常的html条件下运行得很好…

问题是这一行:

animEndEventName = animEndEventNames[ Modernizr.prefixed( 'animation' ) ],

脚本(取自codrops):

(function() {
var support = { animations : Modernizr.cssanimations },
        animEndEventNames = { 'WebkitAnimation' : 'webkitAnimationEnd', 'OAnimation' : 'oAnimationEnd', 'msAnimation' : 'MSAnimationEnd', 'animation' : 'animationend' },
        animEndEventName = animEndEventNames[ Modernizr.prefixed( 'animation' ) ],
        onEndAnimation = function( el, callback ) {
            var onEndCallbackFn = function( ev ) {
                if( support.animations ) {
                    if( ev.target != this ) return;
                    this.removeEventListener( animEndEventName, onEndCallbackFn );
                }
                if( callback && typeof callback === 'function' ) { callback.call(); }
            };
            if( support.animations ) {
                el.addEventListener( animEndEventName, onEndCallbackFn );
            }
            else {
                onEndCallbackFn();
            }
        };
    var containers = [].slice.call( document.querySelectorAll( '.container' ) ),
        containersCount = containers.length,
        nav = document.querySelector( 'nav.thumb-nav' ),
        pageTriggers = [].slice.call( nav.children ),
        isAnimating = false, current = 0;
    function init() {
        resetScroll();
        // disable scrolling
        window.addEventListener( 'scroll', noscroll );
        // set current page trigger
        classie.add( pageTriggers[ current ], 'thumb-nav__item--current' );
        // set current container
        classie.add( containers[ current ], 'container--current' );
        // initialize events
        initEvents();
    }
    function initEvents() {
        // slideshow navigation
        pageTriggers.forEach( function( pageTrigger ) {
            pageTrigger.addEventListener( 'click', function( ev ) {
                ev.preventDefault();
                navigate( this );
            } );
        } );
        // open each container's content area when clicking on the respective trigger button
        containers.forEach( function( container ) {
            container.querySelector( 'button.trigger' ).addEventListener( 'click', function() {
                toggleContent( container, this );
            } );
        } );
        // keyboard navigation events
        document.addEventListener( 'keydown', function( ev ) {
            var keyCode = ev.keyCode || ev.which,
                isContainerOpen = containers[ current ].getAttribute( 'data-open' ) == 'open';
            switch (keyCode) {
                // left key
                case 37:
                    if( current > 0 && !isContainerOpen ) {
                        navigate( pageTriggers[ current - 1 ] );
                    }
                    break;
                // right key
                case 39:
                    if( current < containersCount - 1 && !isContainerOpen ) {
                        navigate( pageTriggers[ current + 1 ] );
                    }
                    break;
            }
        } );
    }
    function navigate( pageTrigger ) {
        var oldcurrent = current,
            newcurrent = pageTriggers.indexOf( pageTrigger );
        if( isAnimating || oldcurrent === newcurrent ) return;
        isAnimating = true;
        // reset scroll
        allowScroll();
        resetScroll();
        preventScroll();
        var currentPageTrigger = pageTriggers[ current ],
            nextContainer = document.getElementById( pageTrigger.getAttribute( 'data-container' ) ),
            currentContainer = containers[ current ],
            dir = newcurrent > oldcurrent ? 'left' : 'right';
        classie.remove( currentPageTrigger, 'thumb-nav__item--current' );
        classie.add( pageTrigger, 'thumb-nav__item--current' );
        // update current
        current = newcurrent;
        // add animation classes
        classie.add( nextContainer, dir === 'left' ? 'container--animInRight' : 'container--animInLeft' );
        classie.add( currentContainer, dir === 'left' ? 'container--animOutLeft' : 'container--animOutRight' );
        onEndAnimation( currentContainer, function() {
            // clear animation classes
            classie.remove( currentContainer, dir === 'left' ? 'container--animOutLeft' : 'container--animOutRight' );
            classie.remove( nextContainer, dir === 'left' ? 'container--animInRight' : 'container--animInLeft' );
            // clear current class / set current class
            classie.remove( currentContainer, 'container--current' );
            classie.add( nextContainer, 'container--current' );
            isAnimating = false;
        } );
    }
    // show content section
    function toggleContent( container, trigger ) {
        if( classie.has( container, 'container--open' ) ) {
            classie.remove( container, 'container--open' );
            classie.remove( trigger, 'trigger--active' );
            classie.remove( nav, 'thumb-nav--hide' );
            container.setAttribute( 'data-open', '' );
            preventScroll();
        }
        else {
            classie.add( container, 'container--open' );
            classie.add( trigger, 'trigger--active' );
            classie.add( nav, 'thumb-nav--hide' );
            container.setAttribute( 'data-open', 'open' );
            allowScroll();
        }
    }
    // scroll functions
    function resetScroll() { document.body.scrollTop = document.documentElement.scrollTop = 0; }
    function preventScroll() { window.addEventListener( 'scroll', noscroll ); }
    function allowScroll() { window.removeEventListener( 'scroll', noscroll ); }
    function noscroll() { 
        window.scrollTo( 0, 0 ); 
    }
    init();
    // For Demo purposes only (prevent jump on click)
    [].slice.call( document.querySelectorAll('.items-wrap a') ).forEach( function(el) { el.onclick = function() { return false; } } );
})();

我从cms页面中删除了所有Magento js和css,并将其替换为Codrops的演示文件。它就是不能运行…

我做错了什么(不是一个buff与js)

提前感谢!

这个Javascript结构

(function() {
    //... all your code, including Modernizr.prefixed() call ...
})();

表示

嘿,Javascript,定义一个匿名函数,然后立即调用

我不熟悉Modernizr如何将自己加载到页面中,但根据您所描述的,您的页面可能是这样设置的。

//...
(function() {
    //... all your code, including Modernizr.prefixed() call ...
})();
//...
<script src="[path to include that defines global Modernizr object]"></script>
Modernizr

你需要调查你的Magento系统是如何加载Modernizr的,并确保你的函数定义/调用在之后