我正在使用 Jquery 1.8.0 创建横幅旋转器插件,并且我的代码在 Firefox 和 chrome 中正常工作,但在 IE9 中神秘地有时无法正常工作,原因不明。我的意思是,横幅根本不会出现,也不会出现错误。它根本不存在。
所以我在我的代码中添加了一些警报(更改为console.log
)以跟踪代码失败的位置,我想我找到了哪里。
页面上的html代码:
<div class="content-top">
<div id="bannerRotator"></div>
</div>
<div class="content-bot">
</div>
页面上的javascript代码:
$(document).ready(function() {
console.log("Before banner rotator");
$("#bannerRotator").BannerRotator({
BRBannerImages: ["../Images/Banners/banner1.jpg",
"../Images/Banners/banner1-b.jpg",
"../Images/Banners/banner2.jpg",
"../Images/Banners/banner2-b.jpg",
"../Images/Banners/banner3.jpg",
"../Images/Banners/banner3-b.jpg",
"../Images/Banners/banner4.jpg",
"../Images/Banners/banner4-b.jpg",
"../Images/Banners/banner5.jpg",
"../Images/Banners/banner5-b.jpg",
"../Images/Banners/banner6.jpg",
"../Images/Banners/banner6-b.jpg"]
});
console.log("After banner rotator");
$("#white-bg").css({ height: $(document).height() });
console.log("After white bg");
});
横幅旋转插件:
(function($) {
$.fn.BannerRotator = function(options) {
console.log("banner creation: begin");
var opts = $.extend($.fn.BannerRotator.defaults, options);
console.log("before foreach");
return this.each(function() {
alert("before this");
// Commented out code
alert("banner creation: end");
});
console.log("after foreach");
};
$.fn.BannerRotator.defaults = {
// Default settings
};
// Other functions
})(jQuery);
执行此代码时,alert("after foreach");
永远不会出现,这是完全正常的。问题是有时它会全部工作,但在其他时候我得到的最后一个警报是alert("before this");
然后我直接进入alert("After banner rotator");
.
我看到的最后一件事是,当插件工作时,content-bot
可以在警告框后面看到里面的内容,而当插件失败时,我看不到content-bot
,但bannerRotator
会显示之前的所有内容。这使我认为它可能与$(document).ready
功能有关,因为似乎当插件失败时,它会因为$(document).ready
触发得太早而失败。
更新
这是我注意到的另一件事。当我第一次打开我的页面时,我的横幅没有出现。没有。不管我刷新多少时间,还是什么都没有。但是当我按 F12 进入开发者工具窗口时,横幅就起作用了。它仍然不是一直有效,但大多数时候它确实有效。
没关系那部分。正是console.log
导致该问题的原因。请参阅为什么 JavaScript 仅在 IE 中打开开发人员工具一次后才能工作?