सत्यापित करें कि बाहरी स्क्रिप्ट भरी हुई है

Question 1

मैं एक jquery प्लगइन बना रहा हूं और मैं सत्यापित करना चाहता हूं कि एक बाहरी स्क्रिप्ट भरी हुई है। यह एक आंतरिक वेब ऐप के लिए है और मैं स्क्रिप्ट नाम / स्थान को सुसंगत रख सकता हूं (mysscript.js)। यह भी एक अंजाइक प्लगइन है जिसे पेज पर कई बार कॉल किया जा सकता है।

यदि मैं सत्यापित कर सकता हूं कि स्क्रिप्ट लोड नहीं हुई है तो मैं इसका उपयोग करके लोड करूंगा:

jQuery.getScript()

मैं कैसे सत्यापित कर सकता हूं कि स्क्रिप्ट लोड की गई है क्योंकि मैं एक ही स्क्रिप्ट को एक से अधिक बार पेज पर लोड नहीं करना चाहता हूं? क्या यह कुछ ऐसा है जिसे मुझे स्क्रिप्ट के कैशिंग के कारण चिंता करने की आवश्यकता नहीं है?

अपडेट: मेरे पास हमारे संगठन में इस प्लगइन का उपयोग करने वाले पर नियंत्रण नहीं हो सकता है और यह लागू करने में सक्षम नहीं हो सकता है कि स्क्रिप्ट पहले से ही एक विशिष्ट आईडी के साथ या उसके बिना पृष्ठ पर नहीं है, लेकिन स्क्रिप्ट नाम हमेशा उसी स्थान पर होगा वही नाम। मुझे उम्मीद है कि मैं यह सत्यापित करने के लिए स्क्रिप्ट के नाम का उपयोग कर सकता हूं कि यह वास्तव में लोड है।

Question 2

यदि स्क्रिप्ट वैश्विक स्थान में कोई चर या फ़ंक्शन बनाती है, तो आप उनकी मौजूदगी की जांच कर सकते हैं:

बाहरी JS (वैश्विक दायरे में) -

var myCustomFlag = true;

और यह जाँचने के लिए कि क्या यह चला है:

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

अपडेट करें

आप <script>सभी <script>तत्वों का चयन करके और उनकी srcविशेषताओं की जाँच करके टैग के अस्तित्व की जाँच कर सकते हैं :

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

Question 3

@ जैस्पर का जवाब पूरी तरह से सही है लेकिन आधुनिक ब्राउज़रों के साथ, एक मानक जावास्क्रिप्ट समाधान हो सकता है:

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

Question 4

इस एक पर बहुत सारे जवाब, लेकिन मुझे लगता है कि यह इस समाधान को जोड़ने के लायक है। यह कुछ अलग उत्तरों को जोड़ती है।

मेरे लिए मुख्य बिंदु थे

एक # सहायता टैग जोड़ें, ताकि इसे ढूंढना आसान हो, और डुप्लिकेट न हो

उपयोग करने से पहले स्क्रिप्ट लोड होने तक प्रतीक्षा करने के लिए .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
    }      
  }
}

Question 5

यह अब बहुत सरल था कि मुझे एहसास है कि यह कैसे करना है, मुझे समाधान के लिए अग्रणी करने के लिए सभी उत्तरों के लिए धन्यवाद। स्क्रिप्ट के स्रोत को निर्दिष्ट करने के लिए मुझे $ .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);
}

Question 6

एक विशिष्ट आईडी के साथ स्क्रिप्ट टैग बनाएं और फिर जांचें कि क्या आईडी मौजूद है?

वैकल्पिक रूप से, स्क्रिप्ट '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 scripts = document.getElementsByTagName('script');
    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?
    }
})();

Question 7

बाहरी स्क्रिप्ट की जांच करने का एक और तरीका लोड किया गया है या नहीं, आप jquery के डेटा फ़ंक्शन का उपयोग कर सकते हैं और सत्यापन ध्वज को संग्रहीत कर सकते हैं । उदाहरण के लिए:

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

Question 8

फ़ंक्शन का उपयोग करने के लिए एक आसान से ऊपर से कई उत्तरों को जोड़ना

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

Question 9

मुझे लगता है कि स्क्रिप्ट लोड त्रुटि को पकड़ने और इसे फिर से लोड करने का प्रयास करने के लिए window.addEventListener ('त्रुटि') का उपयोग करना बेहतर है। जब हम 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);

Question 10

यदि वैश्विक चर उपलब्ध है , तो बस फिर से जांचें यदि नहीं । अधिकतम कॉलस्टैक को रोकने के लिए चेक पर 100ms का समय निर्धारित किया गया है:

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