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

如果我可以验证脚本没有加载，我会使用加载：

jQuery.getScript()

我如何可以验证脚本加载，因为我不想在页面加载更多相同的脚本比一次？这是因为脚本的缓存而不需要担心的事情吗？

更新： 我可能没有对谁在我们的组织使用这个插件控制，可能无法执行该脚本是不是已经有或无特定ID在页面上，但脚本名称将永远在同一个地方，同名。我希望我可以使用脚本的名称来验证它的实际加载。

来源

2012-03-01 AGoodDisplayName

101

如果脚本在全球空间，你可以检查自己的所有脑干任何变量或函数：

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

来源

2012-03-01 17:53:45 Jasper

退出，否则我会+1这个答案。 – shanabus 2012-03-01 17:58:19

这是一个很好的答案，不幸的是，jquery.getScript方法添加了没有指定源代码的脚本。所以我无法找到它。我确实使用了部分答案来解决这个问题。 – AGoodDisplayName 2012-03-01 19:03:26

@AGoodDisplayName在'$ .getScript（）'的回调函数中，您可以设置一个可以检查的全局标志：'$ .getScript（'，function（）{window.myCustomFlag = true;}'）'。然后您可以检查是否存在特定的'

用特定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? 
    } 
})();

来源

2012-03-01 17:49:45 MyStream

+1了很好的回答这个问题是更新 – zeroef 2012-03-01 18:04:06

之前，这是一个完美的解决方案。我建议第二个。 – 2017-11-11 13:54:21

如果可以将代码与这些想法一起使用将会很棒。 – 2017-11-11 14:18:31

此线程位于SO jquery标签的顶部常见问题并拥有庞大的多种方法来检查exisitng脚本

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

大量的反馈各种方法

来源

2012-03-01 17:57:53 charlietfl

很好的答案，关于另一个问题，我想到了CDN的背后。 +1 – AGoodDisplayName 2012-03-01 19:04:22

这是非常简单的，现在我知道如何做到这一点，感谢所有的答案为我带来解决方案。我不得不放弃$ .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); 
}

来源

2012-03-01 19:16:38 AGoodDisplayName

另一种方式来检查外部脚本加载与否，你可以使用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"); 
    }

来源

2014-06-12 04:37:32

适合我需要做的事情。谢谢 – 2016-12-19 08:52:29

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

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

来源

2017-06-15 19:53:35

验证外部脚本加载

回答

更新

相关问题