Próbuję podać jQuery na stronę HTML warunkowo. Należy tylko dodać, jeśli jeszcze nie istnieje.

Używam następującego kodu w pobliżu górnego znacznika mojego ciała, aby wstrzyknąć znacznik skryptu, który zawiera bibliotekę jQuery w głowie.

<script type="text/javascript">

    if (typeof jQuery === 'undefined') {
        alert('now adding jquery');
        var head = document.getElementsByTagName("head")[0];
        script = document.createElement('script');
        script.type = 'text/javascript';
        script.src = 'https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js';
        head.appendChild(script);
        if (typeof jQuery === 'undefined') {
            alert('jquery still not present :(');
        }
    } else {
        alert('jquery already present');
    }
</script>

Kiedy go wykonuję, dostaję wiadomość, że jQuery nadal nie jest obecny po dodaniu go. Znacznik skryptu robi poprawnie pojawia się w źródle załadowanej strony.

Próba korzystania z jQuery nieco dalej na mojej stronie, potwierdza, że jQuery nie działa. Zgodnie z oczekiwaniami konsola JavaScript Chrome mówi "$ nie zdefiniowany".

Jak sprawić, by to zadziałało?

2
Jay 28 październik 2011, 15:01

3 odpowiedzi

Najlepsza odpowiedź

Skrypt ładuje asynchronicznie. Oznacza to, że jego zawartość nie jest bezpośrednio dostępna po dołączeniu elementu.

Zamiast tego użyj onload:

script = document.createElement('script');

script.onload = function() {
    // jQuery is available now
};

script.type = 'text/javascript';
script.src = 'https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js';

head.appendChild(script);
3
pimvdb 28 październik 2011, 11:12

Koczek używa tej metody do testowania, jeśli jQuery jest ładowany przez Google, jeśli nie używać lokalnego:

  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
  <script>window.jQuery || document.write('<script src="js/libs/jquery-1.6.2.min.js"><\/script>')</script>

Wygląda na to, co chcesz osiągnąć :)

2
Marco Johannesen 28 październik 2011, 11:04

Nie czekasz na załadowanie skryptu po włączeniu go do dokumentu

Wypróbuj ten kod przed dołączeniem:

   function helper(){
        if (typeof jQuery === 'undefined') {
            alert('jquery still not present :(');
        }
   };

   script.onreadystatechange= function () {
      if (this.readyState == 'complete') helper();
   }
   script.onload= helper;

Znalazłem to Tutaj Jeśli chcesz wiedzieć więcej

Również są ładowarki, takie jak stealjski lub yepnope

2
Alasdair 7 grudzień 2012, 12:52