わかりました、非常に多くのアプローチがありますが、私は1つだけに興味がありますが、どのアプローチを使用しますか? わからない...
基本的に、ここにジレンマがあります。ページの本文内で jQuery への後続の呼び出しがあります。jQuery が既に定義されているかどうかを知る必要があります。定義されている場合はリロードしないでください。定義されていない場合は、jQuery をロードします。さらに、jQuery が実際に定義されるまで、jQuery コードを実行する必要はありません。
これが私が使用してきたものですが、Google Chromeでこれを呼び出すとエラーが発生するという意味で欠陥があります（jQueryが定義されていないと述べています）
これが私のコードです：
if(!window.jQuery)
{
var script = document.createElement("script");
script.type = "text/javascript";
script.async = false;
script.src = "//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js";
var oScripts = document.getElementsByTagName("script");
var s = oScripts[0];
s.parentNode.insertBefore(script, s);
}
function dpmodPollBgColor()
{
jQuery(document).ready(function($){
// Uncaught ReferenceError: jQuery is not defined
$.cssHooks.backgroundColor = {
get: function(elem) {
if (elem.currentStyle)
var bg = elem.currentStyle["backgroundColor"];
else if (window.getComputedStyle)
var bg = document.defaultView.getComputedStyle(elem,
null).getPropertyValue("background-color");
if (bg.search("rgb") == -1)
return bg;
else {
bg = bg.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);
function hex(x) {
return ("0" + parseInt(x).toString(16)).slice(-2);
}
return "#" + hex(bg[1]) + hex(bg[2]) + hex(bg[3]);
}
}
}
$(".bar-container").each(function() {
if($(this).children(":first").css("width") != "0px")
{
var hexColor = $(this).children(":first").css("background-color");
var bgColor = shadeColor(hexColor, 50);
$(this).css({"background-color": bgColor});
}
});
});
}
if (document.addEventListener)
window.addEventListener("DOMContentLoaded", dpmodPollBgColor, false);
else
addLoadEvent(dpmodPollBgColor);
onReadyStateChange同じページの他のAJAX呼び出しと干渉したくないので、使用したくありません。
基本的に、1 を保証するメソッドが必要です。jQuery がロードされていない場合は、ロードされます。2. jQuery が実際にロードを完了するまで、jQuery が内部にある機能を実行しません。3. jQuery に対して定義されている変数に関係なく、ページ上の他の jQuery コードに干渉しません。たとえば、他のコードが jQuery をusinデフォルトではなくとして定義している場合$。
jQuery の複数のインスタンスを互いに調和させて動作させるのは非常に困難です。
私が今使っている方法はこれです：
ステートメント経由でロードされない場合は、jQuery を定義する if ステートメントを使用します
if(!window.jQuery)。関数を定義し、すべての jQuery をこの関数内にラップします。
function FunctionName() { jQuery(document).ready(function($){
// ここにあるすべての jQuery コード;
}); }
関数 onLoad のロードを試みます。
window.addEventListener可能であれば組み込み関数を使用します。AddLoadEvent()
どういうわけか実装に欠陥がありますが、ロジックは私には正しいようです。Google Chrome で、関数名が異なる同じコードの複数のインスタンスでこれを機能させるにはどうすればよいですか? Google Chrome 以外のすべてのブラウザでは問題ないようです。
ありがとう