jquery - Google でホストされている jQuery を使用する最善の方法ですが、Google でホストされているライブラリにフォールバックできません

Question

Google (または他の Google がホストするライブラリ) でホストされている jQueryをロードしようとするが、Google の試行が失敗した場合に jQuery のコピーをロードするのに良い方法は何でしょうか?

Google が不安定だと言っているのではありません。Google のコピーがブロックされている場合があります (明らかにイランなど)。

タイマーを設定して、jQuery オブジェクトをチェックしますか?

両方のコピーが通過する危険性は何ですか?

「Googleのものを使用する」または「独自のものを使用する」などの回答を実際に探しているわけではありません。私はそれらの議論を理解しています。また、ユーザーが Google バージョンをキャッシュしている可能性が高いことも理解しています。クラウド全般のフォールバックについて考えています。

編集：この部分が追加されました...

Google は google.load を使用して ajax ライブラリをロードすることを提案しており、完了するとコールバックを実行するため、それがこの問題をシリアル化するための鍵であるかどうか疑問に思っています。

私はそれが少しクレイジーに聞こえることを知っています。信頼できる方法でそれを行うことができるかどうかを理解しようとしています。

更新: jQuery は Microsoft の CDN でホストされるようになりました。

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

score 820 · Accepted Answer

次のように達成できます。

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

エラーを回避するために、これはページ内に<head>あり、jQuery 対応のイベントハンドラーは内にある必要があります<body>(ただし、絶対確実ではありません)。

Google がホストするjQueryを使用しないもう 1 つの理由は、一部の国では Google のドメイン名が禁止されていることです。

score 337 · Accepted Answer

これを行うための最も簡単でクリーンな方法は次のとおりです。

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

score 31 · Accepted Answer

サイトに modernizr.js が埋め込まれている場合は、組み込みの yepnope.js を使用して、スクリプトを非同期的に読み込むことができます。とりわけ、jQuery (フォールバックあり)。

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

これにより、Google-cdn から jQuery が読み込まれます。その後、jQuery が正常にロードされたかどうかがチェックされます。そうでない場合 (「いいえ」)、ローカルバージョンがロードされます。また、個人用スクリプトもロードされます。「両方」は、ロードプロセスがテストの結果とは無関係に開始されることを示します。

すべてのロードプロセスが完了すると、関数が実行されます (「MyApp.init」の場合)。

個人的には、この方法による非同期スクリプトの読み込みを好みます。また、サイトを構築するときに modernizr が提供する機能テストに依存しているので、とにかくサイトに埋め込んでいます。したがって、実際にはオーバーヘッドはありません。

score 20 · Accepted Answer

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

}

CDN から Google のコピーを含めようとした後。

typeHTML5 では、属性を設定する必要はありません。

また、使用することができます...

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

score 11 · Accepted Answer

最後の手段として、ローカルファイルを使用することをお勧めします。

現在、jQuery 独自の CDN は https をサポートしていないようです。その場合は、最初にそこからロードすることをお勧めします。

順序は次のとおりです: Google CDN => Microsoft CDN => ローカルコピー。

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

score 6 · Accepted Answer

最新/レガシーの jQuery バージョンとフォールバックを条件付きで読み込みます。

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

score 5 · Accepted Answer

ステップ 1: jQuery の読み込みに失敗しましたか? jQuery(変数をチェック)

JavaScript で定義されていない変数を確認する方法

ステップ 2: 動的に (バックアップ) JavaScript ファイルをインポートする

JavaScript ファイルを別の JavaScript ファイルに含めるにはどうすればよいですか?

score 5 · Accepted Answer

Google の禁止問題のため、私は Microsoft の CDN http://www.asp.net/ajaxlibrary/cdn.ashxを使用することを好みます。

score 4 · Accepted Answer

ASP.NET MVC 5 を使用している場合は、次のコードを BundleConfig.cs に追加して、jquery の CDN を有効にします。

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

score 4 · Accepted Answer

更新:
この回答は間違っていることが判明しました。本当の説明については、コメントを参照してください。

あなたの質問のほとんどは答えられていますが、最後の部分については：

両方のコピーが通過する危険性は何ですか?

本当になし。帯域幅を浪費し、2 番目の役に立たないコピーをダウンロードするために数ミリ秒を追加する可能性がありますが、両方が通過しても実際の害はありません。もちろん、上記の手法を使用してこれを回避する必要があります。

score 2 · Accepted Answer

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

または

if(!window.jQuery){

cdnバージョンがロードされていない場合は機能しません。これは、ブラウザがこの状態を実行し、その間にjQueryを必要とする残りのjavascriptをダウンロードし、エラーを返すためです。解決策は、その条件でスクリプトをロードすることでした。

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

score 2 · Accepted Answer

文字列の最後の < を \x3C にエスケープする必要があると思います。ブラウザがを見ると、これがスクリプトブロックの終わりであると見なします (HTML パーサーは JavaScript について何も知らないため、文字列に表示されるだけのものと、実際にスクリプトを終了することを意図したものとを区別できません)。エレメント）。したがって、HTML ページ内の JavaScript に文字どおり表示されると、(最良の場合) エラーが発生し、(最悪の場合) 巨大なセキュリティホールになります。

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

score 2 · Accepted Answer

ほとんどすべてのパブリック CDN はかなり信頼性が高いです。ただし、Google ドメインのブロックが心配な場合は、代わりのjQuery CDNに簡単にフォールバックできます。ただし、このような場合は、逆の方法で他の CDN を優先オプションとして使用し、Google CDN にフォールバックして、リクエストの失敗と待ち時間を回避することをお勧めします。

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

score 1 · Accepted Answer

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 が定義されていないため、AJAX リクエストには標準の JavaScript を使用する必要があります。

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

score 1 · Accepted Answer

ASP.NET で Razor 構文を使用すると、このコードはフォールバックサポートを提供し、仮想ルートで動作します。

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

score 0 · Accepted Answer

次のようなコードを使用できます。

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

ただし、スクリプトにいくつかの可能なフォールバックをセットアップし、読み込みプロセスを最適化するために使用できるライブラリもあります。

バスケット.js
RequireJS
うんうん

例:

現時点では、 basket.js が最良のバリアントだと思います。スクリプトを localStorage にキャッシュし、次の読み込みを高速化します。最も単純な呼び出し:

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

これにより promise が返され、エラー時に次の呼び出しを行うか、成功時に依存関係を読み込むことができます。

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

score 0 · Accepted Answer

個人用コピーを使用する必要はありません。これが私の完全なベルトとブレースのスクリプトです。

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8"/>
        <title>jQuery</title>
        <!-- EMBED JQUERY USING GOOGLE APIs -->
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

        <!-- IF THAT FAILS EMBED JQUERY USING CLOUDFLARE CDN -->
        <script type="text/javascript">
            window.jQuery || document.write('<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"><\/script>');
        </script>

        <!-- IF THAT FAILS ************* HOW??? *********** EMBED JQUERY FROM MICROSOFT -->
        <script type="text/javascript">
            window.jQuery || document.write('<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.6.0.min.js"><\/script>');
        </script>

        <!-- IF THAT FAILS ************* WOW!!! *********** EMBED JQUERY FROM JQUERY.COM -->
        <script type="text/javascript">
            window.jQuery || document.write('<script src="https://code.jquery.com/jquery-3.6.0.min.js"><\/script>');
        </script>

        <!-- IF THAT FAILS ************* LET'S STOP!!! *********** EMBED JQUERY FROM PERSONAL COPY -->
        <script type="text/javascript">
            window.jQuery || document.write('<script src="jquery.min.js"><\/script>');
        </script>
    </head>
    <body>


    </body>
</html>

jquery - Google でホストされている jQuery を使用する最善の方法ですが、Google でホストされているライブラリにフォールバックできません

23 に答える 23

Related

Reference