Question

我希望仅在没有涉及触摸设备时才包含fancybox。到目前为止，这是我的代码：

<script>
    yepnope([{
        test : Modernizr.touch,
        nope  : './js/lib/fancybox/jquery.fancybox.pack.js',
        callback : {
            "jquery.fancybox.pack.js": function () {
                console.log("fancybox loaded!");
            }
        }
    }]);
</script>

此代码放在结束正文标记之前。我收到了错误TypeError: k.apply is not a function，但这对我没有帮助。

我的问题：

我可以使用此相对路径加载js文件吗？
我的相对路径从哪里开始？从yepnope所在的路径？
如何有条件地加载JS和CSS文件？

更新

现在我尝试了另一种方式：

<script>
Modernizr.load([
    {
        test  : Modernizr.mq('screen and (max-width: 31.25em)'),
        yep  : {
            'photoswipe' : ['/js/klass.min.js', '/js/code.photoswipe-3.0.5.min.js']
        },
        nope : {
            'fancybox' : ['/js/lib/fancybox/jquery.fancybox.pack.js', '/js/lib/fancybox/jquery.fancybox.css']
        },
        callback : {
            'photoswipe': function (url, result, key) {
                var myPhotoSwipe = $("a.fancy").photoSwipe({ enableMouseWheel: false , enableKeyboard: false });
            },
            'fancybox': function (url, result, key) {
                $('a.fancy').fancybox();
            }
        }
    }
]);
</script>

我收到以下错误TypeError: a.split is not a function。我做错了什么？

Answer 1

问：我可以使用此相对路径加载js文件吗？

是的，前提是您的结构类似于：

 index.html
--js/
----lib/
------modernizr.custom.js
--------fancybox/
----------jquery.fancyboxy.pack.js

请参阅下一个答案来解释这个......

问：我的相对路径从哪里开始？从yepnope所在的路径？

Modernizr从html页面的位置获取路径，而不是从modernizr加载脚本的位置（因为它在html中使用该路径创建该脚本引用）。

问：如何有条件地加载JS和CSS文件？

将数组传递给nope而不是仅用于JavaScript的单个字符串：

nope : ['./js/lib/fancybox/jquery.fancybox.pack.js', './styles/fancybox/jquery.fancybox.pack.css']

看一下这些文档，他们在这方面做得很好...... http://modernizr.com/docs/#load

Answer 2

./folder的相对路径是可能的（开始时/不是）。您也不能使用带数组的键。数组或单独的键如下所示：

<script>
    Modernizr.load({
        test: Modernizr.mq('screen and (max-width: 31.25em)'),
        yep: {
            'photoswipe-klass' : './js/klass.min.js',
            'photoswipe-js' : './js/code.photoswipe-3.0.5.min.js'
        },
        nope: {
            'fancybox-js' : './js/lib/fancybox/jquery.fancybox.pack.js',
            'fancybox-css' : './js/lib/fancybox/jquery.fancybox.css'
        },
        callback: {
            'photoswipe-js': function (url, result, key) {
                var myPhotoSwipe = $("a.fancy").photoSwipe({ enableMouseWheel: false , enableKeyboard: false });
            },
            'fancybox-js' : function (url, result, key) {
                $('a.fancy').fancybox();
            }
        }

    });
</script>

yepnope的用法（相对路径，css和js）

2 个答案: