jquery jquery引用 jquery教學 - 使用Google託管的jQuery的最佳方法,但在Google上回退到我的託管庫失敗




11 Answers

你可以像這樣實現它:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
<script>
   window.jQuery || document.write('<script src="/path/to/your/jquery"><\/script>');
</script>

這應該在你的頁面的<head>並且任何jQuery就緒事件處理程序都應該在<body>以避免錯誤(儘管它不是很好的!)。

使用Google託管的jQuery的另一個原因是,在某些國家/地區,Google的域名被禁止。

ui cdn

嘗試在Google (或其他Google託管庫)上加載託管jQuery的好方法是什麼,但是如果Google嘗試失敗,請加載我的jQuery副本?

我不是說谷歌很脆弱。 有些情況下,谷歌的副本被阻止(例如顯然在伊朗)。

我會設置一個計時器並檢查jQuery對象嗎?

這兩個副本都會遇到什麼危險?

不是真的在尋找像“只使用Google的”或“只使用你自己的”的答案。 我理解這些論點。 我也明白,用戶可能會緩存Google版本。 我一般在考慮雲的回退。

編輯:這部分添加...

由於Google建議使用google.load加載ajax庫,並且在完成時執行回調,所以我想知道這是否是序列化此問題的關鍵。

我知道這聽起來有點瘋狂。 我只是想弄清楚它是否可以以可靠的方式完成。

更新:現在託管在微軟CDN上的jQuery。

http://www.asp.net/ajax/cdn/




這似乎適用於我:

<html>
<head>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
// has the google object loaded?
if (window.google && window.google.load) {
    google.load("jquery", "1.3.2");
} else {
    document.write('<script type="text/javascript" src="http://joecrawford.com/jquery-1.3.2.min.js"><\/script>');
}
window.onload = function() {
    $('#test').css({'border':'2px solid #f00'});
};
</script>
</head>
<body>
    <p id="test">hello jQuery</p>
</body>
</html>

它的工作方式是使用調用http://www.google.com/jsapi加載到window像上的google對象。 如果該對像不存在,我們假設訪問Google失敗。 如果是這種情況,我們使用document.write加載本地副本。 (在這種情況下,我使用自己的服務器,請使用您自己的服務器進行測試)。

我也測試了window.google.load的存在 - 我也可以做一個typeof檢查,看看事情是適當的對像或函數。 但我認為這是訣竅。

這裡只是加載邏輯,因為代碼突出顯示失敗了,因為我發布了我測試的整個HTML頁面:

if (window.google && window.google.load) {
    google.load("jquery", "1.3.2");
} else {
    document.write('<script type="text/javascript" src="http://joecrawford.com/jquery-1.3.2.min.js"><\/script>');
}

雖然我必須說,我不確定如果這是您的網站訪問者關心的問題,那麼您應該完全擺脫Google AJAX Libraries API

有趣的事實我最初嘗試在各種版本中使用try..catch塊,但找不到像這樣乾淨的組合。 我有興趣看到這個想法的其他實現,純粹是一個練習。




if (typeof jQuery == 'undefined') {
// or if ( ! window.jQuery)
// or if ( ! 'jQuery' in window)
// or if ( ! window.hasOwnProperty('jQuery'))    

  var script = document.createElement('script');
  script.type = 'text/javascript';
  script.src = '/libs/jquery.js';

  var scriptHook = document.getElementsByTagName('script')[0];
  scriptHook.parentNode.insertBefore(script, scriptHook);

}

嘗試從CDN中添加Google副本之後。

在HTML5中,您不需要設置type屬性。

你也可以使用...

window.jQuery || document.write('<script src="/libs/jquery.js"><\/script>');



您可能想使用本地文件作為最後的手段。

似乎截至目前jQuery自己的CDN不支持https。 如果它確實如此,那麼可能首先要從那裡加載。

因此,這裡是序列:Google CDN => Microsoft CDN =>您的本地副本。

<!-- load jQuery from Google's CDN -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> 
<!-- fallback to Microsoft's Ajax CDN -->
<script> window.jQuery || document.write('<script src="//ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.3.min.js">\x3C/script>')</script> 
<!-- fallback to local file -->
<script> window.jQuery || document.write('<script src="Assets/jquery-1.8.3.min.js">\x3C/script>')</script> 









更新:
這個答案結果是錯誤的。 請參閱評論以獲得真實的解釋。

你們大多數人的問題已經得到解答,但就最後一部分而言:

這兩個副本都會遇到什麼危險?

沒有。 你會浪費帶寬,可能會增加一些毫秒的時間下載第二個無用的副本,但如果它們都通過了,則不會有實際的損害。 當然,您應該使用上述技術來避免這種情況。




我認為這應該逃避字符串中的最後一個<to x3C。 當瀏覽器看到它時,它認為這是腳本塊的結尾(因為HTML解析器不知道JavaScript,它不能區分出現在字符串中的東西,而是實際上意味著結束腳本的東西元件)。 因此,從字面上看,在HTML頁面內部的JavaScript會導致錯誤,並且(在最壞的情況下)會成為一個巨大的安全漏洞。

<script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-2.0.0.min.js"></script>
<script>window.jQuery || document.write('<script src="js/jquery-2.0.0.min.js">\x3C/script>')</script>



在ASP.NET中使用Razor語法,這段代碼提供了後備支持,並使用虛擬根目錄:

@{var jQueryPath = Url.Content("~/Scripts/jquery-1.7.1.min.js");}
<script type="text/javascript">
    if (typeof jQuery == 'undefined')
        document.write(unescape("%3Cscript src='@jQueryPath' type='text/javascript'%3E%3C/script%3E"));
</script>

或者做一個幫手( 幫手概述 ):

@helper CdnScript(string script, string cdnPath, string test) {
    @Html.Raw("<script src=\"http://ajax.aspnetcdn.com/" + cdnPath + "/" + script + "\" type=\"text/javascript\"></script>" +
        "<script type=\"text/javascript\">" + test + " || document.write(unescape(\"%3Cscript src='" + Url.Content("~/Scripts/" + script) + "' type='text/javascript'%3E%3C/script%3E\"));</script>")
}

並像這樣使用它:

@CdnScript("jquery-1.7.1.min.js", "ajax/jQuery", "window.jQuery")
@CdnScript("jquery.validate.min.js", "ajax/jquery.validate/1.9", "jQuery.fn.validate")



儘管為jQuery退避寫入document.write("<script></script>")似乎更容易,但Chrome在這種情況下給出了驗證錯誤。 所以我更喜歡打破“腳本”一詞。 所以它變得像上面更安全。

<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.11.1.min.js"></script>
<script>if (typeof jQuery === "undefined") {
   window.jqFallback = true;
   document.write("<scr"+"ipt src='http://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.1/jquery.min.js'></scr"+"ipt>");
} </script>

對於長期問題,最好記錄JQuery回退。 在上面的代碼中,如果第一個CDN不可用,JQuery將從另一個CDN加載。 但是你可能想知道那個錯誤的CDN並永久刪除它。 (這種情況是非常特殊的情況)同時最好記錄回退問題。 所以你可以用AJAX發送錯誤的案例。 由於JQuery沒有定義,你應該使用vanilla javascript進行AJAX請求。

<script type="text/javascript">
    if (typeof jQuery === 'undefined' || window.jqFallback == true) {
        // XMLHttpRequest for IE7+, Firefox, Chrome, Opera, Safari
        // ActiveXObject for IE6, IE5
        var xmlhttp = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP");
        var url = window.jqFallback == true ? "/yourUrl/" : "/yourUrl2/";
        xmlhttp.open("POST", url, true);
        xmlhttp.send();
    }
</script>



另一個替代ajax.googleapis.comcdnjs.cloudflare.com的後備

(function (doc, $)
{
    'use strict';

    if (typeof $ === 'undefined')
    {
        var script = doc.querySelector('script[src*="jquery.min.js"]'),
            src = script.src.replace('ajax.googleapis.com', 'cdnjs.cloudflare.com');

        script.parentNode.removeChild(script);
        doc.write('<script src="' + src + '"></script>');
    }
})(document, window.jQuery || window.Zepto);
  • 你不必關心jQuery版本
  • 適用於資產管理,不適用於HTML剪輯
  • 在野外測試 - 完美適用於中國用戶



Related