2012-03-01 15 views
44

Tworzę wtyczkę jQuery i chcę sprawdzić, czy załadowany jest skrypt zewnętrzny. To jest dla wewnętrznej aplikacji internetowej i mogę zachować spójność nazwy/lokalizacji skryptu (mysscript.js). Jest to również wtyczka ajaxy, którą można wielokrotnie wywoływać na stronie.Sprawdź, czy zewnętrzny skrypt jest ładowany.

Jeśli mogę zweryfikować skrypt nie jest załadowany będę go ładować przy użyciu:

jQuery.getScript() 

Jak mogę sprawdzić, czy skrypt został załadowany, ponieważ nie chcę ten sam skrypt załadowany na stronie więcej niż raz? Czy nie jest to coś, o co nie powinienem się martwić z powodu buforowania skryptu?

Aktualizacja: I nie może mieć kontrolę nad tym, kto korzysta z tej wtyczki w naszej organizacji i nie może być w stanie egzekwować, że skrypt nie jest już na stronie z lub bez konkretnego ID, ale nazwa skryptu zawsze będzie w tym samym miejscu o tej samej nazwie. Mam nadzieję, że będę mógł użyć nazwy skryptu, aby sprawdzić, czy rzeczywiście jest załadowany.

Odpowiedz

101

Jeśli skrypt tworzy żadnych zmiennych lub funkcji w przestrzeni globalnej można sprawdzić ich istnienia:

Zewnętrznych JS (w zakres globalny) -

var myCustomFlag = true; 

i sprawdzić, czy to prowadzi:

if (typeof window.myCustomFlag == 'undefined') { 
    //the flag was not found, so the code has not run 
    $.getScript('<external JS>'); 
} 

Aktualizacja

Można sprawdzić na istnienie znacznika w pytaniu <script> wybierając wszystkie <script> elementów i sprawdzanie ich src atrybuty:

//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>'); 
} 

Albo można po prostu upiec tego prawa .filter() funkcjonalności na selektor:

var len = $('script[src="<external JS>"]').length; 
+0

Bez głosów, w przeciwnym razie dałbym +1 tej odpowiedzi. – shanabus

+0

To była dobra odpowiedź, niestety metoda jquery.getScript dodaje skrypt bez określonego źródła. Więc nie mogłem go znaleźć. Część odpowiedzi wykorzystałem, by rozwiązać problem +1. – AGoodDisplayName

+0

@AGoodDisplayName W wywołaniu zwrotnym dla '$ .getScript()' możesz ustawić flagę globalną, którą można sprawdzić: '$ .getScript (', function() {window.myCustomFlag = true;}')'. Następnie możesz po prostu sprawdzić, czy istnieje konkretny element '

3

Utwórz znacznik skryptu z określonym identyfikatorem, a następnie sprawdź, czy ten identyfikator istnieje?

Można również przechodzić między znacznikami skryptu sprawdzającymi skrypt "src" i upewnić się, że nie zostały one załadowane z tą samą wartością, której chcesz uniknąć?

Edycja: po informacji zwrotnej, że przykładowy kod byłyby przydatne:

(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? 
    } 
})(); 
+1

+1 za dobrą odpowiedzią zanim pytanie zostało zaktualizowane – zeroef

+0

Jest to idealne rozwiązanie. Polecam drugi. –

+0

Byłoby świetnie, gdyby można umieścić kod z tymi pomysłami. –

6

Był teraz bardzo proste, że zdaję sobie sprawę, jak to zrobić, dzięki wszystkie odpowiedzi za doprowadzenie mnie do rozwiązania. Musiałem zrezygnować z .getScript() w celu określenia źródła skryptu ... czasami najlepsze jest robienie rzeczy ręcznie.

Rozwiązanie

//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); 
} 
2

Innym sposobem sprawdzenia skryptu zewnętrznego jest załadowany lub nie, można użyć danych funkcję jQuery i przechowywać flagę walidacji. Przykład jak:

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"); 
    } 
+1

Działa dobrze dla tego, co musiałem zrobić. dzięki –

1

Scalanie kilku odpowiedzi z góry na łatwym w użyciu funkcja

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); 
}