我正在創建一個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

相關問題