jQuery Lib dynamisch laden

[InJu777]

Hallo zusammen,

ich möchte ein Tool mit jQuery entwickeln. Dieses Tool soll allerdings auf (fast) jeder Webseite funktionieren, also auch auf Seiten, die die jQuery Lib nicht nutzen. Demnach möchte ich die jQuery Lib gerne dynamisch nachladen. Da dieses Tool öffentlich zur Verfügung gestellt wird, sollte es so kompatibel wie nur möglich sein, ohne verschiedene Versionen publizieren zu müssen. Zudem soll die Handhabung so einfach sein, dass nur eine Zeile Code im <script>-Tag eingebunden werden muss.

Nun meine Fragen:

1. Kann ich irgendwie abfragen, ob jQuery bereits auf der Seite eingebunden ist, um das Nachladen zu vernachlässigen?
2. Wenn ja: Kann ich auch die jQuery Version irgendwie herausfinden, die genutzt wird? Damit ich die Kompatibilität auch für ältere jQuery Versionen gewährleisten kann.
3. Wenn nein: Kann es zu Komplikationen mit älteren jQuery-Versionen oder anderen Libs führen, die bereits genutzt werden, wenn ich jQuery immer automatisch nachlade?

Falls dies eine blöde Idee ist, was wäre eine sinnvolle Lösung (JavaScript ohne Lib?) um eine hohe Kompatibilität mit nur einer Version zu erzielen? Oder kennt Ihr Tutorials, die in diese Richtung gehen?

Vielen Dank im Voraus!

 

[CPCoder]

Ja du kannst die jQuery-Lib dynamisch nachladen und einbinden. Wie das genau geht, ist auf dieser Seite beschrieben: Dynamically Load jQuery Library Using Plain JavaScript | jQuery4u

1. Kann ich irgendwie abfragen, ob jQuery bereits auf der Seite eingebunden ist, um das Nachladen zu vernachlässigen?

Du könntest prüfen, ob die Variable jQuery bereits existiert und einen Wert enthält.

2. Wenn ja: Kann ich auch die jQuery Version irgendwie herausfinden, die genutzt wird? Damit ich die Kompatibilität auch für ältere jQuery Versionen gewährleisten kann.

Soweit mir bekannt ist, enthält die jQuery-Lib eine Variable core_version, in welcher die Version der jeweiligen Lib hinterlegt ist.

3. Wenn nein: Kann es zu Komplikationen mit älteren jQuery-Versionen oder anderen Libs führen, die bereits genutzt werden, wenn ich jQuery immer automatisch nachlade?

Zum einen siehe Punkt 1.
In Bezug auf andere Libs könnte es unter Umständen zu Komplikationen kommen, genaueres kann ich dir hierzu allerdings nichts sagen.

 

[InJu777]

In Bezug auf andere Libs könnte es unter Umständen zu Komplikationen kommen, genaueres kann ich dir hierzu allerdings nichts sagen.

Vielen Dank CPCoder für die schnelle Antwort!

Ich arbeite bereits immer mit anonymen, sich selbst aufrufenden Funktionen um die Konflikte mit anderen Libs, die auch den $-Alias verwenden, zu vermeiden. Allerdings weiß ich nicht, ob zwei jQuery Versionen auf einer Seite zu Kompatibilitätsproblemen führen. Hat da jemand Erfahrung?

 

[Sentence]

Moin,
am einfachen prüfst du so, ob jQuery vorhanden ist und evtl. nachgeladen werden muss:

<script>window.jQuery || document.write('<script src="my/path/to/jquery.min.js"><\/script>')</script>

Ich arbeite bereits immer mit anonymen, sich selbst aufrufenden Funktionen um die Konflikte mit anderen Libs, die auch den $-Alias verwenden, zu vermeiden. Allerdings weiß ich nicht, ob zwei jQuery Versionen auf einer Seite zu Kompatibilitätsproblemen führen. Hat da jemand Erfahrung?

Ja, das wird nicht gut funktionieren wenn du den gleichen Namensraum nutzt ($).
Dazu musst du jQuery mit noConflict() aufrufen:

<script>
var myjQuery = jQuery.noConflict();
</script>

Dann nutzt du nicht mehr $.fn oder jQuery.fn sondern myJquery.fn

Die Version der geladenen jQuery instanz bekommst du mit

$().jquery;

heraus.

MfG

 

[InJu777]

Moin,
Ja, das wird nicht gut funktionieren wenn du den gleichen Namensraum nutzt ($).
Dazu musst du jQuery mit noConflict() aufrufen:

Hallo Sentence,

vielen Dank für deine Ausführungen. Das hilft mir sehr weiter.

Meines Wissens kann ich mir noConflict() sparen, wenn ich alles in eine anonyme, selbst aufrufende Funktion packe, wie:

(function($){
  //Hier kann der $-Alias ohne Konflikte genutzt werden
})(jQuery);

Oder habe ich mir da was falsches gemerkt?

 

[Sentence]

Oder habe ich mir da was falsches gemerkt?

//Edit,
mal eben kurz drüber nachgedacht. Das ist ja eine selbstaufrufende anonyme Funktion, dort wird ja gleich die geladene jQuery Version übergeben.
Das heißt du musst vorher prüfen, ob jQuery überhaupt vorhanden ist und ob es die richtige Version ist.

MfG

 

[InJu777]

Das heißt du musst vorher prüfen, ob jQuery überhaupt vorhanden ist und ob es die richtige Version ist.

Genau so will ich es auch machen. Perfekt!
Danke nochmal :)

 

[InJu777]

Hallo zusammen,

ich habe das ganze jetzt wie folgt gelöst:

var $tx;
if (window.jQuery) {
    $tx = jQuery;
    if( jQuery().jquery.replace(".", "") < 17.1 ) {
        addjQuery();
    }   
} else {
    addjQuery();
}
function addjQuery() {
    document.write('<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"><\/script>');
    document.write('<script type="text/javascript">$tx = jQuery.noConflict();<\/script>');
}
document.write('<script src="workingScript.js"><\/script>');

workingScript.js:

(function ($) {
    // some code here
})($tx);

Nun stelle ich sicher, dass jQuery immer für das workingScript.js zur Verfügung steht und keine Kompatibilitätsprobleme mit anderen jQuery Versionen oder Javascript Libs. Soweit funktioniert das auch super, nur leider nicht im IE9 (und womöglich auch in älteren IE-Versionen). Das IE Entwicklertool meldet folgenden Fehler: SCRIPT5009: "jQuery" is undefinded, aber nur wenn die Funktion addjQuery(); ausgeführt wird.​Der Fehler bezieht sich auf die Zeile $tx = jQuery.noConflict();. Das bedeuted jQuery wurde bei Ausführen dieser Zeile noch nicht geladen.

Wie kann ich nun sicherstellen, dass jQuery vollständig geladen wurde und dann erst die Zeile $tx = jQuery.noConflict(); ausgeführt wird, damit es im IE auch funktioniert. Nach wie vor gelten die Herausforderungen aus meinem ersten Beitrag.

Vielen Dank im Voraus!