web-dev-qa-db-ja.com

外部スクリプトがロードされていることを確認

Jqueryプラグインを作成していますが、外部スクリプトがロードされていることを確認します。これは内部Webアプリ用であり、スクリプト名/場所の一貫性を保つことができます（mysscript.js）。これはページ上で何度も呼び出すことができるajaxyプラグインでもあります。

スクリプトがロードされていないことを確認できたら、次を使用してロードします。

jQuery.getScript()

同じスクリプトをページに複数回ロードしたくないので、スクリプトがロードされたことを確認するにはどうすればよいですか？これは、スクリプトのキャッシュのために心配する必要のないものですか？

更新： 組織内でこのプラグインを使用するユーザーを制御できない場合があり、特定のIDの有無にかかわらずスクリプトがページ上にないことを強制できない場合がありますが、スクリプト名は常に同じ場所にあり、同じ名前。スクリプトの名前を使用して、実際にロードされたことを確認できることを望んでいます。

javascriptjqueryasp.net
61
AGoodDisplayName

スクリプトがグローバルスペースに変数または関数を作成する場合、それらの存在を確認できます。

外部JS（グローバルスコープ内）-

var myCustomFlag = true;

そして、これが実行されたかどうかを確認するには：

if (typeof window.myCustomFlag == 'undefined') {
    //the flag was not found, so the code has not run
    $.getScript('<external JS>');
}

更新

すべての<script>要素を選択し、それらのsrc属性を確認することにより、問題の<script>タグの存在を確認できます。

//get the number of `<script>` elements that have the correct `src` attribute
var len = $('script').filter(function () {
    return ($(this).attr('src') == '<external JS>');
}).length;

//if there are no scripts that match, the load it
if (len === 0) {
    $.getScript('<external JS>');
}

または、この.filter()機能をセレクターに直接ベイクできます。

var len = $('script[src="<external JS>"]').length;
128
Jasper

これは非常に簡単でしたが、私は解決策に導くためのすべての答えのおかげで、それを行う方法を理解しています。スクリプトのソースを指定するために$ .getScript（）を放棄しなければなりませんでした...時々手動で行うのが最適です。

解決

//great suggestion @Jasper
var len = $('script[src*="Javascript/MyScript.js"]').length; 

if (len === 0) {
        alert('script not loaded');

        loadScript('Javascript/MyScript.js');

        if ($('script[src*="Javascript/MyScript.js"]').length === 0) {
            alert('still not loaded');
        }
        else {
            alert('loaded now');
        }
    }
    else {
        alert('script loaded');
    }


function loadScript(scriptLocationAndName) {
    var head = document.getElementsByTagName('head')[0];
    var script = document.createElement('script');
    script.type = 'text/javascript';
    script.src = scriptLocationAndName;
    head.appendChild(script);
}
7
AGoodDisplayName

@jasperの答えは完全に正しいですが、最新のブラウザーでは、標準のJavascriptソリューションは次のようになります。

function isScriptLoaded(src)
{
    return document.querySelector('script[src="' + src + '"]') ? true : false;
}
6
Abhishek

特定のIDでスクリプトタグを作成し、そのIDが存在するかどうかを確認しますか？

または、スクリプト 'src'をチェックするスクリプトタグをループし、それらが既に回避したい値と同じ値でロードされていないことを確認しますか？

編集：コード例が役立つとのフィードバックに従ってください：

(function(){
    var desiredSource = 'https://sitename.com/js/script.js';
    var scripts       = document.getElementsByTagName('script');
    var alreadyLoaded = false;

    if(scripts.length){
        for(var scriptIndex in scripts) {
            if(!alreadyLoaded && desiredSource === scripts[scriptIndex].src) {
                alreadyLoaded = true;
            }
        }
    }
    if(!alreadyLoaded){
        // Run your code in this block?
    }
})();

コメント（ https://stackoverflow.com/users/1358777/alwin-kesler ）で述べたように、これは代替（ベンチマークではない）の場合があります。

(function(){
    var desiredSource = 'https://sitename.com/js/script.js';
    var alreadyLoaded = false;

    for(var scriptIndex in document.scripts) {
        if(!alreadyLoaded && desiredSource === scripts[scriptIndex].src) {
            alreadyLoaded = true;
        }
    }
    if(!alreadyLoaded){
        // Run your code in this block?
    }
})();
4
MyStream

このスレッドはSO jqueryタグFAQの先頭にあり、既存のスクリプトをチェックするための非常に多様なメソッドを持っています

GoogleのホストされたjQueryを使用する最良の方法ですが、Googleでホストされているライブラリにフォールバックします

さまざまな方法に関する多くのフィードバック

3
charlietfl

外部スクリプトをチェックする別の方法がロードされているかどうかは、jqueryのdata関数を使用して検証フラグを保存できます。例として：

if(!$("body").data("google-map"))
    {
        console.log("no js");

        $.getScript("https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&callback=initilize",function(){
            $("body").data("google-map",true);

            },function(){
                alert("error while loading script");
            });
        }
    }
    else
    {
        console.log("js already loaded");
    }
2
Sunil Sharma

上からのいくつかの答えを使いやすい関数にマージする

function GetScriptIfNotLoaded(scriptLocationAndName)
{
  var len = $('script[src*="' + scriptLocationAndName +'"]').length;

  //script already loaded!
  if (len > 0)
      return;

  var head = document.getElementsByTagName('head')[0];
  var script = document.createElement('script');
  script.type = 'text/javascript';
  script.src = scriptLocationAndName;
  head.appendChild(script);
}
2
Aaron Sherman

Window.addEventListener（ 'error'）を使用してスクリプトのロードエラーをキャプチャし、再度ロードしようとする方が良いと思います。 CDNサーバーからスクリプトをロードするときに役立ちます。 CDNからスクリプトを読み込めない場合は、サーバーから読み込むことができます。

window.addEventListener('error', function(e) {
  if (e.target.nodeName === 'SCRIPT') {
    var scriptTag = document.createElement('script');
    scriptTag.src = e.target.src.replace('https://static.cdn.com/', '/our-server/static/');
    document.head.appendChild(scriptTag);
  }
}, true);
1
Duke

これに関する回答はあまり多くありませんが、このソリューションを追加する価値があると感じています。いくつかの異なる答えを組み合わせています。

私にとってのキーポイントは

  • #idタグを追加して、簡単に見つけられるようにし、重複しないようにします

  • .onload（）を使用して、スクリプトのロードが完了するまで待ってから使用します

    mounted() {
  // First check if the script already exists on the dom
  // by searching for an id
  let id = 'googleMaps'
  if(document.getElementById(id) === null) {
    let script = document.createElement('script')
    script.setAttribute('src', 'https://maps.googleapis.com/maps/api/js?key=' + apiKey)
    script.setAttribute('id', id)
    document.body.appendChild(script) 

    // now wait for it to load...
    script.onload = () => {
        // script has loaded, you can now use it safely
        alert('thank me later')
        // ... do something with the newly loaded script
    }      
  }
}
0
comfytoday

単純にグローバル変数が使用可能かどうかを確認、そうでない場合もう一度確認。 最大コールスタックの超過を防ぐ 100msを設定するタイムアウトチェックで：

function check_script_loaded(glob_var) {
    if(typeof(glob_var) !== 'undefined') {
    // do your thing
    } else {
    setTimeout(function() {
    check_script_loaded(glob_var)
    }, 100)
    }
}
0
Cybernetic