Modernizr.前缀(不是一个函数)在Magento
Modernizr.prefixed (is not a function) in Magento
我试图在万磁王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
的,并确保你的函数定义/调用在之后
相关文章:
- 我可以在json对象中添加一个函数吗
- 如何在JQuery函数中定义一个值,然后调用另一个函数并使用该值
- 是否可以将一个函数输入连接到另一个函数调用的文本
- 在另一个函数中使用变量this
- 在另一个函数成功结束后调用该函数
- mongoose.connect undefined不是一个函数
- 监听器必须是一个函数
- 使用JS函数来使用另一个函数的语法?node.js
- 如何取消object.prototypes javascript的一个函数
- 从Chrome扩展名中的popup.html文件在background.js文件中运行一个函数
- 嵌套到另一个函数中的Fancybox函数;不起作用
- 如何在javascript中使用不止一个函数
- jQuery-在页面加载时执行一个函数
- jquery UI draggable:UI.children不是一个函数
- jQuery Mobile Undefined不是一个函数
- 如何在php中创建一个函数,该函数与文本区域一起工作,通过输入类似[color:red]的内容来打印具有等效颜色的文本
- javascript函数将数据添加到屏幕,但随后被另一个函数覆盖
- JS异常:animate不是一个函数
- 如何将一个函数附加到一个不存在的元素上
- JavaScript/jQuery-添加添加和删除类与下一个函数之间的延迟