152

次のJavaScriptにCDNを使用しています。

それぞれについて、ブロックされている/利用できない可能性がある場合に、ローカルコピーの使用に戻すにはどうすればよいですか？

4

10 に答える 10

249

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>
于 2011-04-03T19:14:40.883 に答える
16

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

確認するオブジェクトの配列を取得し、サイトのドキュメントを確認します

于 2011-04-02T09:32:23.320 に答える
6 
<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ボイラープレートから取得。

于 2011-04-06T06:29:44.140 に答える
5

私は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'
        ],   .......
于 2014-03-31T09:29:09.143 に答える
4

まず第一に、それらを異なる順序で含めるべきではありませんか？

このようなものが機能するはずです：

<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検証）がロードされているかどうかを確認することです。validatejQuery.fnオブジェクトの静的関数をチェックします。2番目のスクリプトはどこにも追加されておらず、既存のメソッドをプロキシするだけなので、同じ方法でチェックすることはできません。したがって、最初のスクリプトが機能する場合、2番目のスクリプトも機能すると簡単に推測できます。同じCDN。

于 2011-03-27T21:57:36.197 に答える
2

次のソリューションは、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ボイラープレートソリューションで問題ありませんが、コードの一部をレガシーHTMLに挿入する可能性があるため、この万能のアプローチで安全にプレイしてください。

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

<script type="application/javascript">typeof ($.tooltip()) !== 'undefined' || 
document.write(unescape('%3Cscript src="jquery.tooltip.min.js"%3E%3C/script%3E'))</script>
于 2012-07-12T20:18:15.200 に答える
2

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>そうでない場合は、ローカルコピーを参照して、ドキュメントに別のタグを書き込んでフォールバックします。

于 2011-03-10T09:59:13.463 に答える
1

jqueryuiで同様の質問に答えました-googleCDNの使用方法

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

<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リンクのリンクについては、jQueryUIブログを確認してください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>
于 2011-04-08T06:51:29.253 に答える
0 
<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>

この記事から引用

于 2011-03-27T21:42:01.150 に答える
0

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

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

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

于 2011-04-09T20:51:26.467 に答える