Question

我正在开发的网站上使用Modernizr 2.6.2，并在IE8中遇到令人沮丧的错误。我正在将Modernizr加载到文档的头部：

<script src="js/vendor/modernizr-2.6.0-ck.js"></script>

然后我在页面底部加载一个base.js文件，就在结束</body>标记之前。在那个base.js文件中，我有以下代码（Hastebin link for readability）：

/**
 *  Non-jQuery hasClass function for checking the existence of
 *  class names on elements.
 *  @param {string} scripts The string of scripts to check
 *  @param {string} cls The class name we're looking for
 *  @return {boolean} True or false
 */
/*
function hasClass(scripts, cls) {
    var r = new RegExp('\\b' + cls + '\\b');
    return r.test(scripts);
}*/


/**
 *  Get ID from <body> tag
 */
function matchBodyID(match) {
    return match.toLowerCase() === document.body.id.toLowerCase();
}


/**
 *  Check to see if the body tag has a "data-scripts" attribute.
 *  If true, collect the contents. If false, set to false.
 */
// var dataScripts = document.body.getAttribute("data-scripts") || false;


/**
 *  Variables must be defined before we can use them.
 */
var Modernizr = Modernizr || {},
    ScaleText = ScaleText || {};


/*
 *  Using Modernizr.load, we can run our tests to see
 *  which features are available to us and load our
 *  polyfills to handle those that aren't
 */
var timestamp = new Date().getTime();
Modernizr.load([
    {
        load: [
            '//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js',
            'js/plugins/image-array-ck.js?t=' + timestamp,
            'js/plugins/jquery.debouncedresize-ck.js',
            'js/plugins/menu-ck.js?t=' + timestamp
        ],
        complete: function () {
            if (!window.jQuery) {
                Modernizr.load('js/vendor/jquery-1.8.1.min.js');
            }
            ScaleText.invoke();
            $("#skip-to-content").bind("click.menu", function (event) {
                event.preventDefault();
                var $this = $(this),
                $par = $($this.parent());
                $par.toggleClass("open");
            });
        }
    }, {
        test: matchBodyID('home') || matchBodyID('department'),
        yep: [
            'js/plugins/spin.min.js',
            'js/slideshow-ck.js',
            'css/royalslider/royalslider.css',
            'css/royalslider/rs-minimal-white.css',
            'js/plugins/tabs-ck.js?t=' + timestamp,
            'js/plugins/underscore-min.js'
        ]
    }, {
        test: matchBodyID('interior'),
        yep: [
            'js/plugins/spin.min.js',
            'js/plugins/tabs-ck.js?t=' + timestamp,
            // 'js/plugins/menu-ck.js?t=' + timestamp,
            'js/plugins/underscore-min.js'
        ]
    },
    // Check for iOS
    {
        test: Modernizr.appleios,
        yep: [
            'js/plugins/ios-ck.js'
        ]
    },
    // Functional polyfills
    {
        test: Modernizr.flexbox,
        nope: ['js/polyfills/flexie.js']
    }
]);




/*
 *  ScaleText
 *  An attempt to create a custom type scaler for
 *  large type that needs to scale to fit its parent
 */
ScaleText = {

    invoke: function () {
        $(".scalable").each(function (index, element) {
            var $parent = $(element),
                $wrapper = ScaleText.wrapIt($parent.first("div"));

            $parent.css({
                "overflow": "hidden",
                "opacity": 0
            });
            $wrapper.css({
                "-webkit-transform-origin": "left top",
                "-moz-transform-origin": "left top",
                "-ms-transform-origin": "left top",
                "-o-transform-origin": "left top",
                "transform-origin": "left top"
            });
            ScaleText.checkSize($parent, $wrapper);

            jQuery(window).on("debouncedresize.ScaleText", function () {
                ScaleText.checkSize($parent, $wrapper);
            });
        });
    },

    checkSize: function ($parent, $wrapper) {
        var scrollWidth = $parent[0].scrollWidth,
            width = $parent.width(),
            scrollHeight = $parent[0].scrollHeight,
            height = $parent.height(),
            ratio, wRatio, hRatio;

        wRatio = width / scrollWidth;
        hRatio = height / scrollHeight;
        ratio = (wRatio < hRatio) ? wRatio : hRatio;

        $wrapper.css({
            "-webkit-transform": "scale(" + ratio + ")",
            "-moz-transform": "scale(" + ratio + ")",
            "-ms-transform": "scale(" + ratio + ")",
            "-o-transform": "scale(" + ratio + ")",
            "transform": "scale(" + ratio + ")"
        });
        $parent.css({
            "opacity": 1
        });
    },

    wrapIt: function (element) {
        var content = $(element).html(),
            $wrapper = $("<div>" + content + "</div>");
        $(element).empty().append($wrapper);
        return $wrapper;
    }

};

出于某种原因，IE8在Modernizr.load块完全窒息，只说Object doesn't support this property or method。附上截图。

关于为什么会发生这种情况的想法？

修改

我应该提到我正在使用Modernizr的自定义版本：http://www.hastebin.com/fitaqireha.coffee

enter image description here

Answer 1

我也得到了这个。看起来Modernizr.load（）是可选的。以下是来自modernizr-2.5.3的标题;

/*     
 * Modernizr has an optional (not included) conditional resource loader
 * called Modernizr.load(), based on Yepnope.js (yepnopejs.com).
 * To get a build that includes Modernizr.load(), as well as choosing
 * which tests to include, go to www.modernizr.com/download/
 */

您需要转到here并再次获取该包 - 请务必检查 Extra 类别下的 Modernizr.load 。这样做将在文件末尾包含yepnopejs。

This是附加内容，我把它放在我现有的modernizr。*。js中，并且所有内容都按预期工作。

Answer 2

我在IE8中得到了相同的“对象不支持此属性或方法”错误（虽然不在Chrome中）。

因为我有其他页面引用相同的Modernizr声明脚本，我怀疑我的问题在其他地方。事实证明我在加载块中有一个额外的逗号：

Modernizr.load([
   {
      load: [
         'path/to/something.js',,  // <--removing this extra comma resolved the issue
         'path/to/something-else.js'
      ]
   }
]);

Answer 3

我是一名生活在Visual Studio中的.NET开发人员，我使用了一般'Modernizr' NuGet package并偶然发现了同样的问题：它不包括Modernizr.load()（又名YepNope）。

我想提醒.NETters使用包含load()函数的alternative NuGet package 'Modernizr full'。

除此之外，完整版还包括缩小的.js版本，而普通版本不包括（虽然我更喜欢用VS的Web Essentials extension生成缩小版本。）

另请注意，主要的NuGet包似乎更新（目前在Modernizr v.2.8.3，例如最新版），而“Modernizr full”目前为2.6.2）。但对我来说，这就足够了。当然，如果您需要所有闪亮的新剪裁，则应使用Modernizr download功能作为接受的答案。

IE8和Modernizr：对象不支持这个属性或方法吗？

3 个答案: