Лучший способ использовать размещенный в Google jQuery, но отказываться от моей размещенной библиотеки в Google не удается

Question

Как можно было бы попытаться загрузить размещенный jQuery в Google (или других размещенных в Google библиотеках), но загрузить мою копию jQuery в случае неудачной попытки Google?

Я не говорю, что Google ненадежен. В некоторых случаях копия Google блокируется (например, в Иране).

Могу ли я установить таймер и проверить наличие объекта jQuery?

Какая опасность будет у обеих копий?

На самом деле не нужно искать ответы типа «просто воспользуйтесь Google» или «просто используйте свой». Я понимаю эти аргументы. Я также понимаю, что пользователь, скорее всего, будет кэшировать версию Google. Я имею в виду запасные варианты для облака в целом.

---

Редактировать: Эта часть добавлена ​​...

Так как Google предлагает использовать google.load для загрузки библиотек ajax, и когда это сделано, он выполняет обратный вызов, мне интересно, является ли это ключом к сериализации этой проблемы.

Я знаю, это звучит немного безумно. Я просто пытаюсь понять, можно ли это сделать надежным способом или нет.

---

Обновление: jQuery теперь размещен на CDN от Microsoft.

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

Answer 1

Вот отличное объяснение этому!

Также реализует задержки загрузки и тайм-ауты!

http://happyworm.com/blog/2010/01/28/a-simple-and-robust-cdn-failover-for-jquery-14-in-one-line/

Answer 2

UPDATE:
Этот ответ оказался неверным. Пожалуйста, смотрите комментарии для реального объяснения.

---

Большинство из вас ответили на вопрос, но что касается заключительной части:

Какая опасность будет у обеих копий?

Нет, правда. Вы бы потратили пропускную способность, могли бы добавить несколько миллисекунд, загружая вторую бесполезную копию, но это не повредит, если они оба пройдут. Конечно, вам следует избегать этого, используя методы, упомянутые выше.

Answer 3

Для тех, кто использует ASP.NET MVC 5, добавьте этот код в ваш BundleConfig.cs, чтобы включить CDN для jquery:

bundles.UseCdn = true;
Bundle jqueryBundle = new ScriptBundle("~/bundles/jquery", "//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js").Include("~/Scripts/jquery-{version}.js");
jqueryBundle.CdnFallbackExpression = "window.jQuery";
bundles.Add(jqueryBundle);

Answer 4

Google Hosted jQuery

• Если вы заботитесь о старых браузерах, в первую очередь версиях IE до IE9, это наиболее широко совместимая версия jQuery

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

• Если вы не заботитесь о oldIE, этот будет меньше и быстрее:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>

План резервного копирования / восстановления!

• В любом случае, вы должны использовать запасной вариант для локального на случай, если Google CDN выйдет из строя (маловероятно) или заблокирован в месте, откуда ваши пользователи получают доступ к вашему сайту (чуть более вероятно), например, в Иране или иногда в Китае. *

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>if (!window.jQuery) { document.write('<script src="/path/to/your/jquery"><\/script>'); }
</script>

Ссылка: http://websitespeedoptimizations.com/ContentDeliveryNetworkPost.aspx

Answer 5

Я создал Gist, который должен динамически загружать jQuery, если он еще не загружен, и если источник отказывает, он переходит к запасным вариантам (сшитым из множества ответов): https://gist.github.com/tigerhawkvok/9673154

Обратите внимание, я планирую обновлять Gist, но не этот ответ, несмотря на то, что он стоит!

/* See https://gist.github.com/tigerhawkvok/9673154 for the latest version */
function cascadeJQLoad(i) { // Use alternate CDNs where appropriate to load jQuery
    if (typeof(i) != "number") i = 0;
    // the actual paths to your jQuery CDNs
    var jq_paths = [
        "ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js",
        "ajax.aspnetcdn.com/ajax/jQuery/jquery-2.1.0.min.js"
    ];
    // Paths to your libraries that require jQuery
    var dependent_libraries = [
        "js/c.js"
    ];
    if (window.jQuery === undefined && i < jq_paths.length) {
        i++;
        loadJQ(jq_paths[i], i, dependent_libraries);
    }
    if (window.jQuery === undefined && i == jq_paths.length) {
        // jQuery failed to load
        // Insert your handler here
    }
}

/***
 * You shouldn't have to modify anything below here
 ***/

function loadJQ(jq_path, i, libs) { //load jQuery if it isn't already
    if (typeof(jq_path) == "undefined") return false;
    if (typeof(i) != "number") i = 1;
    var loadNextJQ = function() {
        var src = 'https:' == location.protocol ? 'https' : 'http';
        var script_url = src + '://' + jq_path;
        loadJS(script_url, function() {
            if (window.jQuery === undefined) cascadeJQLoad(i);
        });
    }
    window.onload = function() {
        if (window.jQuery === undefined) loadNextJQ();
        else {
            // Load libraries that rely on jQuery
            if (typeof(libs) == "object") {
                $.each(libs, function() {
                    loadJS(this.toString());
                });
            }
        }
    }
    if (i > 0) loadNextJQ();
}

function loadJS(src, callback) {
    var s = document.createElement('script');
    s.src = src;
    s.async = true;
    s.onreadystatechange = s.onload = function() {
        var state = s.readyState;
        try {
            if (!callback.done && (!state || /loaded|complete/.test(state))) {
                callback.done = true;
                callback();
            }
        } catch (e) {
            // do nothing, no callback function passed
        }
    };
    s.onerror = function() {
        try {
            if (!callback.done) {
                callback.done = true;
                callback();
            }
        } catch (e) {
            // do nothing, no callback function passed
        }
    }
    document.getElementsByTagName('head')[0].appendChild(s);
}

/*
 * The part that actually calls above
 */

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

Answer 6

if (typeof jQuery == 'undefined')) { ...

Или

if(!window.jQuery){

Не будет работать, если версия cdn не загружена, потому что браузер будет работать через это условие и во время него все еще загружает оставшуюся часть javascripts, которая требует jQuery, и возвращает ошибку. Решением было загрузить сценарии через это условие.

    <script src="http://WRONGPATH.code.jquery.com/jquery-1.4.2.min.js" type="text/javascript"></script><!--  WRONGPATH for test-->
  <script type="text/javascript">
  function loadCDN_or_local(){
    if(!window.jQuery){//jQuery not loaded, take a local copy of jQuery and then my scripts
      var scripts=['local_copy_jquery.js','my_javascripts.js'];
      for(var i=0;i<scripts.length;i++){
      scri=document.getElementsByTagName('head')[0].appendChild(document.createElement('script'));
      scri.type='text/javascript';
      scri.src=scripts[i];
    }
  }
  else{// jQuery loaded can load my scripts
    var s=document.getElementsByTagName('head')[0].appendChild(document.createElement('script'));
    s.type='text/javascript';
    s.src='my_javascripts.js';
  }
  }
  window.onload=function(){loadCDN_or_local();};
  </script>

Answer 7

Я считаю, что должен экранировать последний

<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>

Answer 8

Невозможно загрузить ресурс из внешнего хранилища данных вне вашего контроля. Поиск пропущенных функций совершенно ошибочен как средство избежать перерыва, как описано здесь: http://www.tech -101.com / support / topic / 4499-questions-using-a-cdn /

Answer 9

Хотя запись document.write("<script></script>") кажется более простой для отката jQuery, в этом случае 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>

Answer 10

Используя синтаксис Razor в ASP.NET, этот код обеспечивает резервную поддержку и работает с виртуальным корнем:

@{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")