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その問題を引き起こしたのは でした。IE で開発者ツールを 1 回開いた後にのみ JavaScript が機能するのはなぜですか?を参照してください。