更新

Question

我正在创建一个jquery插件，我想验证是否已加载外部脚本。这是一个内部Web应用程序，我可以保持脚本名称/位置一致（mysscript.js）。这也是一个可以在页面上多次调用的ajaxy插件。

如果我可以验证脚本未加载，我将使用以下命令加载：

jQuery.getScript()

如何验证脚本是否已加载，因为我不希望多次在页面上加载相同的脚本？这是因为缓存脚本而我不应该担心的事情吗？

更新： 我可能无法控制谁在我们的组织中使用此插件，并且可能无法强制该脚本不在具有或不具有特定ID的页面上，但脚本名称将始终位于相同的位置名称。我希望我可以使用脚本的名称来验证它实际已加载。

Answer 1

如果脚本在全局空间中创建任何变量或函数，您可以检查它们是否存在：

外部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;

Answer 2

现在我已经意识到如何做到这一点非常简单，这要归功于引导我找到解决方案的所有答案。我不得不放弃$ .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);
}

Answer 3

@jasper的答案是完全正确的，但是对于现代浏览器，标准的Javascript解决方案可能是：

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

Answer 4

创建具有特定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?
    }
})();

Answer 5

此主题位于SO jquery标记常见问题解答的顶部，并且有多种方法可以检查exisitng脚本

Best way to use Google's hosted jQuery, but fall back to my hosted library on Google fail

关于各种方法的大量反馈

Answer 6

是否加载了检查外部脚本的另一种方法，您可以使用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");
    }

Answer 7

将上面的几个答案合并为一个易于使用的功能

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

Answer 8

关于这个问题的答案很少，但是我觉得值得添加这种解决方案。它结合了一些不同的答案。

对我来说关键点是

添加#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
    }      
  }
}

Answer 9

我认为最好使用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);

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

验证外部脚本是否已加载

10 个答案:

更新