web-dev-qa-db-ja.com

CDNがブロックされている/使用できない場合に、ローカルスクリプトファイルをフォールバックとしてロードする方法

次のjavascriptにCDNを使用しています：

それぞれについて、ブロックされている/使用できないインスタンスでローカルコピーを使用するように戻すにはどうすればよいですか？

javascriptcdnfallback
136
raklos

Cdnスクリプトがロードされたことを確認するには、このスクリプトが定義する変数/関数の存在を確認します。定義されていない場合は、cdnが失敗し、ローカルスクリプトコピーをロードする必要があります。

この原則に基づいたソリューションは次のとおりです。

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

（window.jQueryプロパティが定義されていない場合、cdnスクリプトはロードされませんでした）。

この方法を使用して独自のソリューションを構築できます。たとえば、jqueryツールチッププラグインは$.tooltip()関数を作成するため、次のようなコードで確認できます。

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

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

確認するオブジェクトの配列を受け取り、 site のドキュメントを確認します

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

HTML5から取得 定型文 。

6
EMMERICH

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'
        ],   .......
4
Maxim

最初に-別の順序でそれらを含めるべきではありませんか？

このような何かが動作するはずです：

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

ここで行っているのは、最初のプラグイン（jQ validate）がロードされているかどうかを単純にチェックすることです。 jQuery.fnオブジェクトの静的validate関数をチェックします。 2番目のスクリプトを同じようにチェックすることはできません。何も追加せず、既存のメソッドをプロキシするだけなので、最初のスクリプトが機能する場合、2番目のスクリプトも機能すると想定するのは簡単です。同じCDN。

3
wildcard

Libが正常にロードされたことを確認する方法を知る必要があります。例えば：

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

そのため、これはGoogle CDNからjQuery（1.5.1）をロードしようとします。 <script>タグは全体のレンダリングと実行プロセスをブロックするため（明示的に別の指示がない限り）、jQueryオブジェクトがwindow内で見つかった場合、すぐに確認できます。そうでない場合は、別の<script>タグをドキュメントに書き込み、ローカルコピーを参照してフォールバックします。

2
jAndy

次のソリューションは、HTML5、XHTML 1.0 Transitional、およびその他のHTMLフレーバーの両方の検証に合格します。各外部JQuery呼び出しの後に次を配置します。 jquery.min.jsをJQueryスクリプトのローカルコピーへのパスに置き換えてください。

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

Unescapeを使用しない場合、属性仕様リストでは「％」が許可されないため、 http://validator.w3.org で検証するときにエラーが発生します。

HTML5 Boilerplateの例は、古いHTMLで使用すると検証エラーも発生します。

  1. 必須属性「タイプ」が指定されていません
  2. 文字「＆」は区切り文字の最初の文字ですが、データとして発生しました

HTML5および将来のHTMLフレーバー専用に開発している場合は、HTML5 Boilerplateソリューションで問題ありませんが、コードの一部をレガシーHTMLに挿入している可能性があるため、この万能型アプローチで安全にプレイしてください。

外部でホストされるスクリプトごとに異なる関数を指定する必要があります。たとえば、JQuery Tooltipプラグインは$ .tooltip（）関数を作成するため、次のようにして確認できます。

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

jquery ui-google CDNの使用方法 で同様の質問に回答しました

を使用して電話をかけることができます

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

テーマの名前を変更して、他のUiテーマにリンクすることもできます。この場合、名前ベースを他のテーマ名/base/jquery-ui.cssに変更し、他のテーマに変更します。

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

すべてのCDNリンクのリンクについては、jQuery UIブログをご覧ください http://blog.jqueryui.com/

Googleが失敗した場合にホストに戻りたい場合は、次のようにします。

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

関連するCDNが実際に除外されていれば、どのソリューションも無痛だとは思いません。 （たとえば、iptables/drop、不適切に構成されたルーターなど。）信頼できない場合は、ローカルですべてを使用してください。

1
Lajos Veres
<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>

この記事 から取得

0
Swaff

このスクリプトの読み込みはすべて、独自のJavascriptコードで行うのが最善です。

最初に、新しいSCRIPT要素をDOMに挿入して、CDNファイルをロードしてみます。次に、定義するオブジェクトを探して、ロードされたことを確認します。オブジェクトが表示されない場合は、別のSCRIPT要素を挿入してローカルコピーをロードします。おそらく、DOMをクリーンアップし、同様にロードに失敗したSCRIPTを削除するのが最善です。

タイミングの問題を考慮することを忘れないでください。つまり、負荷は瞬時ではありません。

0
Michael Dillon