動態加載jQuery從託管的JavaScript文件，如果不可用頁

Question

我想要做的想法是允許客戶端添加我託管到他們的網站的腳本。我希望能夠在腳本中使用jQuery，但不能肯定地說它始終可用。這裏是我明智的代碼。這是我迄今爲止託管的JavaScript頁面的完整文件，我無法使其工作。 $（'title'）。html部分就是這樣，我可以看看它是否工作

我想要託管的腳本包括客戶端網站上的jQuery。我不希望客戶端必須包括jQuery的，除了我的腳本

window.onload = function() { 
    if (typeof jQuery == 'undefined') { 
     var jq = document.createElement('script'); 
      jq.type = 'text/javascript'; 
      jq.src = ('https:' == document.location.protocol ? 'https://' : 'http://') + 'ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js'; 
     var sc = document.getElementsByTagName('script')[0]; 
      sc.parentNode.insertBefore(jq, sc); 
    } 

    console.log($('title').html()); 

} 

這個JavaScript文件loacated我的服務器上和我的客戶將包括本文件中許多相同的方式，你會爲谷歌分析。

這是我希望我的客戶必須包括的唯一東西。拉基本相同谷歌分析

<script type="text/javascript"> 
    var _waq = _gaq || []; 
     _waq.push(['PARAM1', 'PARAM2']); 

    (function() { 
     var wa = document.createElement('script'); 
      wa.type = 'text/javascript'; 
      wa.async = true; 
      wa.src = ('https:' == document.location.protocol ? 'https://' : 'http://') + 'PATH/TO/SCRIPT/wa.js'; 
     var s = document.getElementsByTagName('script')[0]; 
      s.parentNode.insertBefore(wa, s); 
    })(); 
</script> 

當我運行頁面，我得到一個錯誤說Uncaught ReferenceError: $ is not defined但是如果我再在頁面加載後，我在$('title').html();型我拿到冠軍在控制檯返回。

我確定這與腳本中console.log的運行時間有關，並且尚未讓jQuery完全加載。我的問題是我如何能夠創建一個客戶端可以添加的JavaScript頁面，動態加載jquery，如果它不可用，並讓它在腳本上的任何其他東西運行之前加載？在所有瀏覽器

function done(){ //on submit function 
    alert($); 
} 

function load(){ //load jQuery if it isn't already 
    window.onload = function(){ 
     if(window.jQuery === undefined){ 
      var src = 'https:' == location.protocol ? 'https':'http', 
       script = document.createElement('script'); 
      script.onload = done; 
      script.src = src+'://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js'; 
      document.getElementsByTagName('body')[0].appendChild(script); 
     }else{ 
      done(); 
     } 
    } 
} 

if(window.readyState){ //older microsoft browsers 
    window.onreadystatechange = function(){ 
     if(this.readyState == 'complete' || this.readyState == 'loaded'){ 
      load(); 
     } 
    } 
}else{ //modern browsers 
    load(); 
} 

Answer 1

我的同事剛剛解決了同樣的問題

Answer 2

這一個工程。從他的代碼中刪除，變量更改爲反映您的代碼。

if(jq.readyState) { 
    // For old versions of IE 
    jq.onreadystatechange = function() { 
     if(this.readyState == 'complete' || this.readyState == 'loaded') { 
      // do something... 
     } 
    } 
} else { 
    // Other browsers 
    jq.onload = function() { 
     // do something... 
    } 
} 

Answer 3

問題已經在SO

這個線程代表很多好的觀點已經覆蓋了很多次。點擊jQuery的標籤「內容」選項卡上，將看到它的最高票數列表

Best way to use Google's hosted jQuery, but fall back to my hosted library on Google fail

編輯：在場景差異檢查本地VS CDN。對此情況反向

Answer 4

您可以檢查window.jQuery是否返回true，如果它不包含庫。像這樣的東西。

window.onload = function() { 
    if (!window.jQuery) { 
     var jq = document.createElement('script'); 
     jq.type = 'text/javascript'; 
     jq.src = ('https:' == document.location.protocol ? 'https://' : 'http://') + 'ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js'; 
     var sc = document.getElementsByTagName('script')[0]; 
     sc.parentNode.insertBefore(jq, sc); 
    } 
    //You had this in the code you posted so I left it there 
    console.log($('title').html()); 
}