【发布时间】：2012-10-15 01:07:46
【问题描述】：
我在一个正在开发的网站上使用 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
【问题讨论】：
-
你解决了这个问题吗？刚刚遇到同样的场景和问题。
-
在 IE9 中遇到同样的问题
标签： javascript internet-explorer modernizr