Ich erstelle ein JQuery-Plugin und möchte überprüfen, ob ein externes Skript geladen ist. Dies ist für eine interne Web-App und ich kann den Skriptnamen / -speicherort konsistent halten (mysscript.js). Dies ist auch ein Ajaxy-Plugin, das auf der Seite mehrmals aufgerufen werden kann.
Wenn ich überprüfen kann, ob das Skript nicht geladen ist, lade ich es mit:
jQuery.getScript()
Wie kann ich überprüfen, ob das Skript geladen ist, weil ich nicht möchte, dass dasselbe Skript mehr als einmal auf die Seite geladen wird? Ist dies etwas, worüber ich mir aufgrund des Zwischenspeicherns des Skripts keine Sorgen machen sollte?
Update: Ich habe möglicherweise keine Kontrolle darüber, wer dieses Plugin in unserer Organisation verwendet, und kann möglicherweise nicht erzwingen, dass sich das Skript nicht bereits auf der Seite mit oder ohne eine bestimmte ID befindet, aber der Skriptname befindet sich immer an derselben Stelle wie der selbe Name. Ich hoffe, ich kann den Namen des Skripts verwenden, um zu überprüfen, ob es tatsächlich geladen ist.
quelle
Antworten:
Wenn das Skript Variablen oder Funktionen im globalen Bereich erstellt, können Sie deren Existenz überprüfen:
Externes JS (im globalen Bereich) -
var myCustomFlag = true;
Und um zu überprüfen, ob dies ausgeführt wurde:
if (typeof window.myCustomFlag == 'undefined') { //the flag was not found, so the code has not run $.getScript('<external JS>'); }
Aktualisieren
Sie können die Existenz des
<script>
betreffenden Tags überprüfen , indem Sie alle<script>
Elemente auswählen und ihresrc
Attribute überprüfen ://get the number of `<script>` elements that have the correct `src` attribute var len = $('script').filter(function () { return ($(this).attr('src') == '<external JS>'); }).length; //if there are no scripts that match, the load it if (len === 0) { $.getScript('<external JS>'); }
Oder Sie backen diese
.filter()
Funktionalität einfach direkt in den Selektor:var len = $('script[src="<external JS>"]').length;
quelle
$.getScript()
Sie ein globales Flag setzen, das überprüft werden kann :$.getScript('<external JS>, function () { window.myCustomFlag = true; }')
. Dann können Sie einfach prüfen, ob das spezifische<script>
Element oder diemyCustomFlag
Variable vorhanden ist.Die Antwort von @ jasper ist völlig richtig, aber mit modernen Browsern könnte eine Standard-Javascript-Lösung sein:
function isScriptLoaded(src) { return document.querySelector('script[src="' + src + '"]') ? true : false; }
quelle
Boolean
anstelle des bedingten Operators verwenden, wenn Sie möchtenreturn document.querySelector('script[src="' + src + '"]');
Das war jetzt, da ich weiß, wie es geht, sehr einfach, dank all der Antworten, die mich zur Lösung geführt haben. Ich musste $ .getScript () aufgeben, um die Quelle des Skripts anzugeben ... manchmal ist es am besten, Dinge manuell zu erledigen.
Lösung
//great suggestion @Jasper var len = $('script[src*="Javascript/MyScript.js"]').length; if (len === 0) { alert('script not loaded'); loadScript('Javascript/MyScript.js'); if ($('script[src*="Javascript/MyScript.js"]').length === 0) { alert('still not loaded'); } else { alert('loaded now'); } } else { alert('script loaded'); } function loadScript(scriptLocationAndName) { var head = document.getElementsByTagName('head')[0]; var script = document.createElement('script'); script.type = 'text/javascript'; script.src = scriptLocationAndName; head.appendChild(script); }
quelle
Einige zu viele Antworten auf diese Frage, aber ich denke, es lohnt sich, diese Lösung hinzuzufügen. Es kombiniert einige verschiedene Antworten.
Wichtige Punkte für mich waren
Verwenden Sie .onload (), um zu warten, bis das Skript vollständig geladen ist, bevor Sie es verwenden
mounted() { // First check if the script already exists on the dom // by searching for an id let id = 'googleMaps' if(document.getElementById(id) === null) { let script = document.createElement('script') script.setAttribute('src', 'https://maps.googleapis.com/maps/api/js?key=' + apiKey) script.setAttribute('id', id) document.body.appendChild(script) // now wait for it to load... script.onload = () => { // script has loaded, you can now use it safely alert('thank me later') // ... do something with the newly loaded script } } }
quelle
Erstellen Sie das Skript-Tag mit einer bestimmten ID und prüfen Sie dann, ob diese ID vorhanden ist.
Alternativ können Sie die Skript-Tags durchlaufen, um nach dem Skript 'src' zu suchen, und sicherstellen, dass diese nicht bereits mit demselben Wert geladen sind wie der, den Sie vermeiden möchten.
Bearbeiten: folgende Rückmeldung, dass ein Codebeispiel nützlich wäre:
(function(){ var desiredSource = 'https://sitename.com/js/script.js'; var scripts = document.getElementsByTagName('script'); var alreadyLoaded = false; if(scripts.length){ for(var scriptIndex in scripts) { if(!alreadyLoaded && desiredSource === scripts[scriptIndex].src) { alreadyLoaded = true; } } } if(!alreadyLoaded){ // Run your code in this block? } })();
Wie in den Kommentaren erwähnt ( https://stackoverflow.com/users/1358777/alwin-kesler ), kann dies eine Alternative sein (kein Benchmarking):
(function(){ var desiredSource = 'https://sitename.com/js/script.js'; var scripts = document.getElementsByTagName('script'); var alreadyLoaded = false; for(var scriptIndex in document.scripts) { if(!alreadyLoaded && desiredSource === scripts[scriptIndex].src) { alreadyLoaded = true; } } if(!alreadyLoaded){ // Run your code in this block? } })();
quelle
document.getElementsByTagName('script')
, hat es aber nicht getestetEine andere Möglichkeit, um zu überprüfen, ob ein externes Skript geladen ist oder nicht, besteht darin, die Datenfunktion von jquery zu verwenden und ein Validierungsflag zu speichern. Beispiel als:
if(!$("body").data("google-map")) { console.log("no js"); $.getScript("https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&callback=initilize",function(){ $("body").data("google-map",true); },function(){ alert("error while loading script"); }); } } else { console.log("js already loaded"); }
quelle
Zusammenführen mehrerer Antworten von oben zu einer benutzerfreundlichen Funktion
function GetScriptIfNotLoaded(scriptLocationAndName) { var len = $('script[src*="' + scriptLocationAndName +'"]').length; //script already loaded! if (len > 0) return; var head = document.getElementsByTagName('head')[0]; var script = document.createElement('script'); script.type = 'text/javascript'; script.src = scriptLocationAndName; head.appendChild(script); }
quelle
Ich denke, es ist besser, window.addEventListener ('error') zu verwenden, um den Skriptladefehler zu erfassen und erneut zu laden. Dies ist nützlich, wenn wir Skripte von einem CDN-Server laden. Wenn wir kein Skript vom CDN laden können, können wir es von unserem Server laden.
window.addEventListener('error', function(e) { if (e.target.nodeName === 'SCRIPT') { var scriptTag = document.createElement('script'); scriptTag.src = e.target.src.replace('https://static.cdn.com/', '/our-server/static/'); document.head.appendChild(scriptTag); } }, true);
quelle
Überprüfen Sie einfach , ob die globale Variable verfügbar ist , oder überprüfen Sie sie erneut . Um zu verhindern , dass der maximale Callstack überschritten wird, setzen Sie ein Timeout von 100 ms für die Prüfung:
function check_script_loaded(glob_var) { if(typeof(glob_var) !== 'undefined') { // do your thing } else { setTimeout(function() { check_script_loaded(glob_var) }, 100) } }
quelle