Angenommen, Sie würden auf einer ganzen Reihe von Seiten einen Include durchführen und innerhalb dieses Includes einige jQuery-spezifische Dinge tun wollen. Diese Seite hat möglicherweise bereits jQuery geladen oder auch nicht. Wenn ja, möchten Sie es nicht noch einmal laden, aber wenn nicht, dann doch. Dies funktioniert dafür.
Intelligente asynchrone Methode
// Only do anything if jQuery isn't defined
if (typeof jQuery == 'undefined') {
if (typeof $ == 'function') {
// warning, global var
thisPageUsingOtherJSLibrary = true;
}
function getScript(url, success) {
var script = document.createElement('script');
script.src = url;
var head = document.getElementsByTagName('head')[0],
done = false;
// Attach handlers for all browsers
script.onload = script.onreadystatechange = function() {
if (!done && (!this.readyState || this.readyState == 'loaded' || this.readyState == 'complete')) {
done = true;
// callback function provided as param
success();
script.onload = script.onreadystatechange = null;
head.removeChild(script);
};
};
head.appendChild(script);
};
getScript('http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js', function() {
if (typeof jQuery=='undefined') {
// Super failsafe - still somehow failed...
} else {
// jQuery loaded! Make sure to use .noConflict just in case
fancyCode();
if (thisPageUsingOtherJSLibrary) {
// Run your jQuery Code
} else {
// Use .noConflict(), then run your jQuery Code
}
}
});
} else { // jQuery was already loaded
// Run your jQuery Code
};
Beachten Sie, dass der jQuery-Code, den Sie ausführen möchten, an mehreren Stellen aufgerufen wird. Wiederholen Sie sich dort nicht, sondern legen Sie ihn in eine Funktion, die Sie aufrufen können, um den Vorgang zu starten.
Dieser Code wurde von hier angepasst.
Document.write Methode
Hipster-Kids benutzen kein document.write, aber wenn Sie zu alt sind, um sich darum zu kümmern
var jQueryScriptOutputted = false;
function initJQuery() {
//if the jQuery object isn't available
if (typeof(jQuery) == 'undefined') {
if (! jQueryScriptOutputted) {
//only output the script once..
jQueryScriptOutputted = true;
//output the script (load it from google api)
document.write("<scr" + "ipt type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></scr" + "ipt>");
}
setTimeout("initJQuery()", 50);
} else {
$(function() {
// do anything that needs to be done on document.ready
// don't really need this dom ready thing if used in footer
});
}
}
initJQuery();
!window.jQuery && document.write("");
Erfüllt seinen Zweck für mich.
Gibt es Unterschiede im Endergebnis?
Toller Code, aber wenn wir ein jQuery-Plugin verwenden möchten, wo und wie müssen wir die JavaScript-Datei dieses Plugins einfügen? – Damit die Plugin-Datei nach ‘http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js’ aufgerufen wird und bevor unser jQuery-Code ausgeführt wird.
Ich streichle mich gerne selbst, während ich jQuery schreibe.
Wer nicht?
So machen wir das in Jamaika
Ich bin kein Programmierer und habe daher einige Probleme, das zu verstehen und zu implementieren.
Beim asynchronen Verfahren, was ist mit „fancyCode()“? Es scheint, als würdest du mir sagen, ich solle überall .noConflict() verwenden, aber wie?
Dies scheint auf einer Seite zu funktionieren, auf der bereits jQuery lief, aber auf einer Seite, die kein jQuery hat, schlägt es mit „fancyCode is not defined“ fehl. Wenn ich diese Zeile entferne, heißt es „thisPageUsingOtherJSLibrary is not defined“ und bezieht sich auf die Zeile in getscript().
Hier ist der Code, an dem ich arbeite: http://noodle.mx/scripts/widgets.js
Vielen Dank für diese wunderbare Methode, um jQuery dynamisch auf die Seite zu laden. Nochmals vielen Dank.
Wenn Sie ein jQuery-Plugin schreiben und jQuery laden möchten, falls der Benutzer es vergessen hat, ist die document.write-Methode der richtige Weg, da die asynchrone Methode das Auslösen der eigenen document.ready-Funktion des Benutzers nicht verhindert, bevor das Skript geladen wird.
Wenn Sie also folgende Situation haben
Sie sollten die document.write-Methode in IhremPlugin.js verwenden, um sicherzustellen, dass jQuery geladen wird, bevor die ready-Funktion erreicht wird.
Ich hoffe, das hilft anderen Entwicklern, und wenn jemand herausfindet, wie die asynchrone Methode mit dem oben genannten funktioniert, kommentieren Sie bitte unten.
Leichter Tippfehler zwischen your-plugin.js und yourPlugin.js, aber die Logik bleibt dieselbe.
Tatsächlich schlagen beide Lösungen fehl, jQuery konsistent vor einem separaten $(function(){ }); zu laden, was dies für die Plugin-Lösung, die ich suchte, zu einer unannehmbaren Lösung machen könnte.
Schade. Zurück auf Los…
Vielen Dank für diesen Beitrag,
ich habe es versucht
document.write Methode .
Danke, dass Sie mich hier korrigiert haben
„<scr” + “ipt
Beim document.write-Beispiel fehlen/doppelte Anführungszeichen... Da ich auch " für Attribute verwende, verwende ich immer ' für die Zeichenkettenquotierung
document.write(‘<scr’ + ‘ipt type=”text/javascript” src=”http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js”></scr’ + ‘ipt>’);
Dieser Trick, das Skript-Tag aufzuteilen, funktioniert in IE 11 nicht mehr. Es gibt Sicherheitscode, der es blockiert, oder eine Änderung im JS-Parser hat dies gestoppt.
if(thisPageUsingOtherJSLibrary) -> if(!thisPageUsingOtherJSLibrary) ?
hat für mich funktioniert.. danke
Vielen Dank für die wertvollen Tipps. Es funktioniert für mich, Jquery dynamisch hinzuzufügen, ohne es zu duplizieren.
Mach weiter so. Danke nochmal!!!
Sie können ganz einfach den folgenden Trick verwenden
<head>
…
<script type=”text/javascript” > <src=”https://ajax.googleapis.com/ajax/libs/jquery/{version}/jquery.min.js”></script>
<script type=”text/javascript”>
function jqload()
{
if (typeof jQuery == “undefined”) {
var script = document.createElement (“script”);
script.type = “text / javascript”;
script.src = “jquery.min.js”;
document.getElementsByTagName (“head”) [0]. appendChild (script);
script.onload = mypageload;
script.onreadystatechange = function () {
if (script.readyState == “loaded” | | script.readyState == “complete”) {
mypageload ();}}
}
}
mypageload = function ()
{
htmlmypage = $ (“# mypage”). html ();
$ (“# mypage”). empty ();
$ (“# mypage”). html (htmlmypage);
htmlmypage= undefined;
}
</script>
…
</head>
<body onload=”jqload()”>
<div id=”mypage”>
…..
</div>
</ body>
Alle Skripte in {div id = “mypage”} werden auf diese Weise ordnungsgemäß initialisiert, nachdem jQuery geladen wurde.
Es gab einen Fehler, ich musste das var in Zeile 6 hinzufügen: Beispiel: var= thisPageUsingOtherJSLibrary
@Kevin: Bei mir auch! Das ist definitiv ein Tippfehler. Danke für den Tipp.
…oder Sie könnten (und sollten) RequireJS verwenden
http://ajaxian.com/archives/requirejs-asynchronous-javascript-loading
Keine davon funktioniert.