javascript - moment - ¿Cómo cargar archivos de script locales como respaldo en casos donde CDN está bloqueado/no disponible?

jquery enlace

Question

Esta pregunta ya tiene una respuesta aquí:

• La mejor forma de utilizar jQuery alojado en Google, pero recurrir a mi biblioteca alojada en Google, falla 21 respuestas

Estoy usando un CDN para el siguiente javascript:

• https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js
• https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.10/jquery-ui.min.js
• http://ajax.aspnetcdn.com/ajax/mvc/3.0/jquery.validate.unobtrusive.min.js
• http://ajax.aspnetcdn.com/ajax/jquery.validate/1.7/jquery.validate.min.js

Para cada uno, ¿cómo puedo volver a usar la copia local en la instancia donde puede estar bloqueada / no disponible?

Answer 1

Hubiera buscado un plugin como yepnopejs

yepnope([{
  load: ''http:/­/ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js'',
  complete: function () {
    if (!window.jQuery) {
      yepnope(''local/jquery.min.js'');
    }
  }
}]);

Toma una matriz de objetos para verificar, verifique la documentación en el sitio

Answer 2

La siguiente solución pasa la validación para HTML5, XHTML 1.0 Transitional y otros sabores HTML. Coloque lo siguiente después de cada una de sus llamadas externas de JQuery. Asegúrese de reemplazar jquery.min.js con la ruta a su copia local de la secuencia de comandos de JQuery.

<script type="application/javascript">window.jQuery || 
document.write(unescape(''%3Cscript src="jquery.min.js"%3E%3C/script%3E''))</script>

Si no usa unescape, tendrá errores al validar con http://validator.w3.org ya que "%" no está permitido en una lista de especificación de atributos.

El ejemplo HTML5 Boilerplate también tiene errores de validación cuando se usa con HTML más antiguo:

1. atributo requerido "tipo" no especificado
2. carácter "&" es el primer carácter de un delimitador, pero se produjo como datos

Estará bien con la solución HTML5 Boilerplate si está desarrollando solo HTML5 y futuros sabores HTML, pero dado que puede encontrar que inserta partes de su código en HTML heredado, arriesgue con este enfoque único para todos .

Tendrá que especificar una función diferente para cada script alojado externamente. Por ejemplo, el complemento JQuery Tooltip crea la función $ .tooltip () para que pueda verificarlo con lo siguiente:

<script type="application/javascript">typeof ($.tooltip()) !== ''undefined'' || 
document.write(unescape(''%3Cscript src="jquery.tooltip.min.js"%3E%3C/script%3E''))</script>

Answer 3

Lo mejor es hacer todo este script cargando con su propio código Javascript.

Primero intente cargar el archivo CDN insertando un nuevo elemento SCRIPT en el DOM. Luego verifique que se haya cargado buscando un objeto que defina. Si el objeto no aparece, inserte otro elemento SCRIPT para cargar la copia local. Probablemente sea mejor limpiar el DOM y eliminar SCRIPTs que tampoco se cargaron.

No se olvide de tener en cuenta los problemas de tiempo, es decir, la carga no es instantánea.

Answer 4

Lo primero, ¿no debería incluirlos en diferente orden?

Algo como esto debería funcionar:

<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.7/jquery.validate.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/mvc/3.0/jquery.validate.unobtrusive.min.js"></script>
<script>jQuery.fn.validate || document.write(''<script src="js/jquery.validate.min.js">/x3C/script><script src="js/jquery.validate.unobtrusive.min.js">/x3C/script>''</script>

Lo que estoy haciendo aquí es simplemente verificar si se ha cargado el primer complemento (validación jQ). comprobando una función de validate estática en el objeto jQuery.fn. No puedo verificar el segundo guión de la misma manera, porque no está agregando nada en ninguna parte, solo representando los métodos existentes, por lo que es más fácil suponer que si el primero funciona, el segundo también funcionará, después de todo, son proporcionados por el mismo CDN.

Answer 5

Necesita saber cómo puede asegurarse de que una lib se haya cargado correctamente. Por ejemplo:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.js"></script>
<script>window.jQuery || document.write(''<script src="js/jquery.min.js">/x3C/script>''</script>

Así que esto intenta cargar jQuery (1.5.1) desde google CDN. Dado que las etiquetas <script> bloquean el proceso general de renderizado y ejecución (si no se le dice explícitamente diferente), podemos verificarlo inmediatamente si el objeto jQuery se encuentra dentro de la window . Si no, simplemente retroceda escribiendo otra etiqueta <script> en el documento, haciendo referencia a una copia local.

Answer 6

No creo que ninguna de las soluciones sea indolora si el CDN relacionado se filtra realmente. (como, por ejemplo, iptables / drop, enrutadores mal configurados.) Si no confía en ellos, use todo localmente ... Y ahorre algunas sorpresas / llamadas de usuarios en redes exóticas.

Answer 7

Para confirmar que se cargó el script cdn, puede verificar la existencia de cualquier variable / función que este script defina, si no está definida, entonces cdn falló y debe cargar la copia del script local.

En este principio se basan soluciones como esa:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script>window.jQuery || document.write(''<script src="js/libs/jquery-1.5.1.min.js">/x3C/script>'')</script>

(si no hay window.jQuery, la propiedad definida no se cargó el script cdn).

Puede construir sus propias soluciones usando este método. Por ejemplo, jquery tooltip plugin crea la función $.tooltip() para que podamos verificarlo con un código como este:

<script>
    if (typeof $.tooltip === ''undefined'') {
        document.write(''<script src="js/libs/jquery.tooltip.min.js">/x3C/script>'');
    }
</script>

Answer 8

Respondí una pregunta similar en jquery ui - cómo usar google CDN

Puedes hacer la llamada usando

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/themes/base/jquery-ui.css" type="text/css" media="all" /> 
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.5.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.min.js" type="text/javascript"></script>

También puede vincular a otros temas de Ui cambiando el nombre del tema. En este caso, cambie la base del nombre a cualquier otro nombre de tema /base/jquery-ui.css a cualquier otro tema.

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/themes/base/jquery-ui.css" type="text/css" media="all" />

Consulte el jQuery UI Blog para obtener un enlace de todos los enlaces de CDN http://blog.jqueryui.com/

Si desea volver a su host en caso de que Google fallara, puede hacer

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script type="text/javascript">
if (typeof jQuery == ''undefined'')
{
    document.write(unescape("%3Cscript src=''/jquery.js'' type=''text/javascript''%3E%3C/script%3E"));
}
</script>

Answer 9

Yo uso http://fallback.io/

  fallback.load({
        // Include your stylesheets, this can be an array of stylesheets or a string!
        page_css: ''index.css'',

        // JavaScript library. THE KEY MUST BE THE LIBARIES WINDOW VARIABLE!
        JSON: ''//cdnjs.cloudflare.com/ajax/libs/json2/20121008/json2.min.js'',

        // Here goes a failover example. The first will fail, therefore Fallback JS will load the second!
        jQuery: [
            ''//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.FAIL_ON_PURPOSE.min.js'',
            ''//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js'',
            ''//cdnjs.cloudflare.com/ajax/libs/jquery/1.9.0/jquery.min.js''
        ],   .......

Answer 10

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js"></script>
<script>!window.jQuery && document.write(unescape(''%3Cscript src="js/libs/jquery-1.4.2.js"%3E%3C/script%3E''))</script>

Tomado de HTML5 Boilerplate .

Answer 11

<script src="http://ajax.aspnetcdn.com/ajax/mvc/3.0/jquery.validate.unobtrusive.min.js" type="text/javascript"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.7/jquery.validate.min.js" type="text/javascript"></script>   
<script type="text/javascript">
if(typeof jQval == ''undefined'')
{
    document.write(unescape("%3Cscript src=''/Scripts/jquery.validate.unobtrusive.min.js'' type=''text/javascript''%3E%3C/script%3E"));
    document.write(unescape("%3Cscript src=''/Scripts/jquery.validate.min.js'' type=''text/javascript''%3E%3C/script%3E"));
}
</script>

Tomado de este artículo