如果頁面上沒有，則從托管的javascript文件動態加載jQuery

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文件在我的服務器上放置，我的客戶端將包含此文件，其方式與谷歌分析的方式大致相同。

這是我希望我的客戶必須包含的唯一內容。 拉出與谷歌分析基本相同

<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，並在腳本運行的任何其他內容之前加載它？

Answer 1

我的同事只需要解決同樣的問題。 從他的代碼中刪除，變量已更改為反映您的代碼。

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 2

這適用於所有瀏覽器

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 3

您可以檢查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());
}

Answer 4

問題已在SO中多次涉及

這個線程代表了很多好的觀點。 點擊jquery標簽的“投票”標簽，將在最高投票列表中看到它

使用谷歌托管的jQuery的最佳方式，但回到我在谷歌上的托管庫失敗

編輯：場景的差異是檢查本地與CDN。 扭轉這種情況