Der beste Weg, Google gehostete jQuery zu verwenden, aber zu meiner Gastgeber-Bibliothek auf Google zurückgreifen scheitern

StackOverflow https://stackoverflow.com/questions/1014203

Frage

Was wäre ein guter Weg, um zu versuchen, die gehostete jQuery bei Google zu laden (oder andere Google gehostete libs), aber meine Kopie von jQuery laden, wenn der Google Versuch fehlschlägt?

Ich sage nicht, Google flockig ist. Es gibt Fälle, in denen die Google Kopie blockiert wird (anscheinend im Iran, zum Beispiel).

Würde ich einen Timer einstellen und überprüfen Sie für das jQuery-Objekt?

Was die Gefahr von beiden Kopien würde kommen durch?

suchen Nicht wirklich für Antworten wie „einfach die Google ein verwenden“ oder „nur Ihre eigenen verwenden.“ Ich verstehe diese Argumente. Ich verstehe auch, dass der Benutzer wahrscheinlich das Google-Version im Cache gespeicherten hat. Ich denke an Fallbacks für die Cloud im Allgemeinen.

Edit: Dieser Teil hinzugefügt ...

Da Google google.load Verwendung schlägt vor, die Ajax-Bibliotheken zu laden, und er führt einen Rückruf, wenn Sie fertig, ich frage mich, ob das der Schlüssel ist, dieses Problem zu Serialisierung.

Ich weiß, dass es ein bisschen verrückt klingt. Ich bin nur, um herauszufinden, ob es in einer zuverlässigen Art und Weise durchgeführt werden kann oder nicht.

Update:. JQuery jetzt auf Microsofts CDN gehostet

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

War es hilfreich?

Lösung

Sie können es wie folgt erreicht werden: 

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

Dieses in Ihrer Seite <head> sein sollte und alle jQuery bereit Event-Handler in der <body> Fehler zu vermeiden sein sollte (obwohl es nicht narrensicher!).

Ein Grund mehr, nicht Google gehostete jQuery ist, dass in einigen Ländern, die Google-Domain-Name verboten ist.

Andere Tipps

Die einfachste und sauberste Weg, dies bei weitem zu tun: 

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

Das scheint für mich zu arbeiten: 

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

Wie es funktioniert, ist das google Objekt zu verwenden, dass Aufruf http://www.google.com/jsapi Lasten auf das window Objekt. Wenn das Objekt nicht vorhanden ist, gehen wir davon aus, dass der Zugang zu Google versagt. Wenn das der Fall ist, laden wir eine lokale Kopie document.write verwenden. (Ich bin meinen eigenen Server in diesem Fall verwendet wird, bitte selbst verwendet dies zum Testen).

Ich teste auch auf das Vorhandensein von window.google.load - mir auch ein typeof Check tun kann, um zu sehen, dass die Dinge Objekte oder Funktionen wie geeignet sind. Aber ich denke, das ist der Trick funktioniert.

Hier ist nur die Ladelogik, da Code-Hervorhebung scheint, da ich die ganze HTML-Seite geschrieben zum Scheitern verurteilt war ich Prüfung: 

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>');
}

Obwohl ich sagen muss, ich bin nicht sicher, dass, wenn dies ein Problem für die Besucher Ihrer Website sollten Sie mit der Google AJAX Libraries API überhaupt.

Fun fact : Ich habe versucht, zunächst einen try..catch Block für diese in verschiedenen Versionen zu verwenden, konnte aber nicht eine Kombination finden, die so sauber wie das war. Ich würde mich interessieren andere Implementierungen dieser Idee, um zu sehen, lediglich als eine Übung.

Wenn Sie modernizr.js eingebettet auf Ihrer Website haben, können Sie das integrierte in yepnope.js verwenden, um Ihre Skripte asynchron geladen werden -. Unter anderem jQuery (mit Rückfall) 

Modernizr.load([{
    load : '//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js'
},{
    test : window.jQuery,
    nope : 'path/to/local/jquery-1.7.2.min.js',
    both : ['myscript.js', 'another-script.js'],
    complete : function () {
        MyApp.init();
    }
}]);

Dies lädt jQuery aus dem Google-CDN. Danach wird es geprüft, ob jQuery erfolgreich geladen wurde. Wenn nicht ( „Nein“), wird die lokale Version geladen. Auch sind Ihre persönlichen Skripte geladen -. Die „beide“ zeigt an, dass der Last-Prozess unabhängig vom Ergebnis des Tests iniated ist

Wenn alle Last-Prozesse abgeschlossen sind, eine Funktion ausgeführt wird, im Fall ‚MyApp.init‘.

Ich persönlich bevorzuge diese Art der asynchronen Skript Laden. Und wie ich auf den Feature-Tests durch modernizr bereitgestellt verlassen, wenn der Aufbau eine Website, ich habe es trotzdem auf der Website eingebettet. Also gibt es eigentlich keinen Overhead.

Es gibt einige große Lösungen hier, aber ich werde es nehmen gerne einen Schritt weiter in Bezug auf die lokale Datei.

In einem Szenario, wenn Google nicht scheitern, sollte es eine lokale Quelle laden, aber vielleicht eine physische Datei auf dem Server ist nicht unbedingt die beste Option. Ich erwähne dies, weil ich zur Zeit die gleiche Lösung implementieren, nur ich wieder in einer lokalen Datei fallen soll, die von einer Datenquelle erzeugt wird.

Meine Gründe dafür ist, dass ich einige Stück des Verstandes haben wollen, wenn es um die Verfolgung kommt, was ich von Google geladen vs. was ich auf dem lokalen Server. Wenn ich Versionen ändern will, mag ich meine lokale Kopie synchronisiert halten mit dem, was ich versuche, von Google zu laden. In einer Umgebung, wo es viele Entwickler ist, denke ich, der beste Ansatz, diesen Prozess zu automatisieren wäre, so dass alles, was man eine Versionsnummer in einer Konfigurationsdatei tun müßte wird ändern.

Hier ist meine vorgeschlagene Lösung, die in der Theorie funktionieren soll:

  • In einer Anwendungskonfigurationsdatei, ich werde speichern 3 Dinge: absolute URL für die Bibliothek, die URL für den JavaScript-API und die Versionsnummer
  • eine Klasse schreiben, die den Inhalt der Datei der Bibliothek bekommt selbst (erhält die URL von app config), speichert sie in meine Datenquelle mit dem Namen und der Versionsnummer
  • Schreiben Sie einen Handler, die aus der db meine lokale Datei zieht und speichert die Datei, bis die Versionsnummer ändert.
  • Wenn es sich ändert (in meiner app config), meine Klasse wird die Dateiinhalte auf der Grundlage der Versionsnummer, speichern Sie es als neuen Datensatz in meiner Datenquelle ziehen, dann wird der Handler in Kick und die neue Version servieren.

In der Theorie, wenn mein Code richtig geschrieben ist, alles, was ich brauchen würde, zu tun ist, um die Versionsnummer in meiner app Config ändert Viola dann! Sie haben eine Ausweichlösung, die automatisiert ist, und Sie haben keine physischen Dateien auf dem Server zu erhalten.

Was bedeutet jeder denken? Vielleicht ist das übertrieben, aber es könnte ein elegantes Verfahren zur Aufrechterhaltung Ihrer AJAX-Bibliotheken sein.

Acorn 

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

}

Wenn Sie versuchen, die Google-Kopie aus dem CDN aufzunehmen.

In HTML5, brauchen Sie nicht das type Attribut zu setzen.

Sie können auch verwendet werden ... 

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

Sie möchten Ihre lokale Datei als letztes Mittel eingesetzt werden.

Es scheint, als die jetzt jQuery eigene CDN nicht unterstützt https. Wenn ja Sie dann vielleicht wollen von dort zuerst laden.

Hier ist also die Folge: Google CDN => Microsoft CDN => Ihre lokale Kopie. 

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

Bedingter latest / Legacy-jQuery-Version und Rückfall laden: 

<!--[if lt IE 9]>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script>window.jQuery || document.write('<script src="/public/vendor/jquery-legacy/dist/jquery.min.js">\x3C/script>')</script>
<![endif]-->
<!--[if gte IE 9]><!-->
    <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
    <script>window.jQuery || document.write('<script src="/public/vendor/jquery/dist/jquery.min.js">\x3C/script>')</script>
<!--<![endif]-->
  • Schritt 1: versäumte jQuery laden? (Check jQuery Variable)

Wie eine nicht definierte Variable in JavaScript überprüfen

  • Schritt 2: Dynamisch Import (das Backup) Javascript-Datei

Wie füge ich eine JavaScript-Datei in einem anderen JavaScript-Datei?

Durch das Verbot Problem Google I bevorzugen Microsoft CDN verwenden http://www.asp.net/ajaxlibrary/cdn.ashx

Hier ist ein großer explaination auf diesem!

Auch implementiert Lade Verzögerungen und Timeouts!

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

Für Menschen mit ASP.NET MVC 5, fügen Sie diesen Code in Ihren BundleConfig.cs das CDN für jquery zu aktivieren: 

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

UPDATE:
Diese Antwort erwies sich als falsch sein. Bitte beachten Sie die Kommentare für die wirkliche Erklärung.

Die meisten von Ihnen wurden Frage beantwortet, aber wie für den letzten Teil:

  

Was die Gefahr von beiden Kopien würde kommen durch?

Keine wirklich. Sie würden Bandbreite verschwenden, könnten einige Millisekunden fügen Sie eine zweite nutzlose Kopie herunterzuladen, aber es ist nicht unbedingt schaden, wenn sie beide durchkommen. Sie sollten natürlich vermeiden dies die oben genannten Techniken verwendet wird.

habe ich einen Gist, die jQuery dynamisch geladen werden soll, wenn es nicht bereits geladen wird, und wenn die Quelle nicht, geht sie auf Fallbacks (zusammengenäht aus vielen Antworten): https://gist.github.com/tigerhawkvok/9673154

Bitte beachten Sie, ich plane den Gist aktuell zu halten, aber nicht diese Antwort, für was es wert ist! 

/* 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();
}

Google gehostete jQuery

  • Wenn Sie älteren Browser kümmern, in erster Linie IE-Versionen vor IE9, dies ist die am weitesten kompatibel jQuery-Version 
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  • Wenn Sie oldIE sich nicht, dieses ist kleiner und schneller: 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>

Backup / Fallback-Plan!

  • So oder so, sollten Sie einen Rückfall auf lokale verwenden nur für den Fall der Google CDN (unwahrscheinlich) ausfällt oder in einem Ort blockiert, die Ihre Benutzer Zugriff auf Ihre Website aus (etwas wahrscheinlicher), wie der Iran oder manchmal China. 
<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>

Hinweis: http://websitespeedoptimizations.com/ContentDeliveryNetworkPost.aspx

halte ich das sollte die letzte entkommen 

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

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

oder 

if(!window.jQuery){

Wird nicht funktioniert, wenn CDN Version nicht geladen werden, da Browser über diesen Zustand laufen wird und während er noch den Rest von Javascripts Herunterladen, die jQuery benötigt und es gibt Fehler. Lösung war Skripte durch diesen Zustand zu laden. 

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

Mit Razor-Syntax in ASP.NET, dieser Code bietet Ausweich Unterstützung und arbeitet mit einer virtuellen root: 

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

Oder machen Sie einen Helfer ( Helfer Übersicht ): 

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

und verwenden Sie es wie folgt aus: 

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

Obwohl document.write("<script></script>") Schreiben einfacher für jQuery Backoff scheint, gibt Chrome Validierungsfehler an diesem Fall. Also ziehe ich breaking „Skript“ -Wort. So wird es sicherer wie oben. 

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

Für die langfristigen Probleme, wäre es besser, JQuery Fallbacks loggt sein. In dem obigen Code, wenn erster CDN nicht verfügbar ist, wird JQuery von einem anderen CDN geladen. Aber man konnte, dass fehlerhafte CDN wissen will, und es dauerhaft zu entfernen. (Dieser Fall sehr Ausnahmefall) Auch ist es besser Ausweich Probleme einzuloggen. So können Sie fehlerhafte Fälle mit AJAX senden. Wegen der JQuery nicht definiert ist, sollten Sie Vanille JavaScript für AJAX-Request verwendet werden. 

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

Die Unfähigkeit, die Ressource von einem externen Datenspeicher außerhalb Ihrer Kontrolle zu laden, ist schwierig. Suche nach Funktionen fehlt, ist völlig irrig als Mittel zu vermeiden, dass ein Timeout leidet, wie sie hier beschrieben: http://www.tech-101.com/ Unterstützung / Thema / 4499-Fragen-mit-a-CDN /

Noch ein weiterer Rückfall, die ersetzt ajax.googleapis.com mit cdnjs.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);
  • Sie können auf eine jQuery-Version bleiben, indem sie es in der Zeichenfolge Angabe
  • Perfekt für Asset Management, die nicht mit HTML funktioniert snips
  • in der freien Natur getestet - funktioniert perfekt für Anwender aus China

Sie können mit Code wie: 

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>window.jQuery || document.write('<script type="text/javascript" src="./scripts/jquery.min.js">\x3C/script>')</script>

Aber es gibt auch Bibliotheken, die Sie einrichten können mehr möglich Fallbacks für Ihre Skripte und den Ladevorgang optimieren:

  • basket.js
  • RequireJS
  • yepnope

Beispiele:

basket.js Ich denke, die beste Variante für den Moment. Wird Ihr Skript in der localstorage Cach, dass im nächsten Belastungen beschleunigen. Der einfachste Aufruf: 

basket.require({ url: '/path/to/jquery.js' });

Damit wird ein Versprechen zurück, und Sie können auf Fehler nächsten Anruf tun, oder Lastabhängigkeiten auf Erfolg: 

basket
    .require({ url: '/path/to/jquery.js' })
    .then(function () {
        // Success
    }, function (error) {
        // There was an error fetching the script
        // Try to load jquery from the next cdn
    });

RequireJS 

requirejs.config({
    enforceDefine: true,
    paths: {
        jquery: [
            '//ajax.aspnetcdn.com/ajax/jquery/jquery-2.0.0.min',
            //If the CDN location fails, load from this location
            'js/jquery-2.0.0.min'
        ]
    }
});

//Later
require(['jquery'], function ($) {
});

yepnope 

yepnope([{
  load: 'http://ajax.aspnetcdn.com/ajax/jquery/jquery-2.0.0.min.js',
  complete: function () {
    if (!window.jQuery) {
      yepnope('js/jquery-2.0.0.min.js');
    }
  }
}]);

Fast alle öffentlichen CDNs sind ziemlich zuverlässig. Wenn Sie jedoch besorgt über blockierte Google-Domain sind, dann können Sie einfach zu einem anderen öffentlichen CDN Rückfall wie PageCDN , CDNJS oder jsDelivr : 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
   window.jQuery || document.write('<script src="https://pagecdn.io/lib/jquery/3.2.1/jquery.min.js"><\/script>');
</script>

jedoch in einem solchen Fall können Sie es vorziehen einige andere CDN als bevorzugte Option zu verwenden und Rückfall auf Google CDN fehlgeschlagenen Anfragen zu vermeiden und Wartezeit: 

<script src="https://pagecdn.io/lib/jquery/3.2.1/jquery.min.js"></script>
<script>
   window.jQuery || document.write('<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"><\/script>');
</script>
Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top