2012-03-01 29 views
44

Tôi đang tạo một plugin jquery và tôi muốn xác minh tập lệnh bên ngoài được tải. Điều này là dành cho một ứng dụng web nội bộ và tôi có thể giữ cho tên tập lệnh/vị trí nhất quán (mysscript.js). Đây cũng là một plugin ajaxy có thể được gọi nhiều lần trên trang.Xác minh kịch bản bên ngoài được tải

Nếu tôi có thể xác minh các tập lệnh không được nạp tôi sẽ tải nó sử dụng:

jQuery.getScript() 

Làm thế nào tôi có thể xác minh các tập lệnh được nạp bởi vì tôi không muốn kịch bản tương tự nạp trên trang hơn hơn một lần? Đây có phải là điều mà tôi không cần phải lo lắng về do bộ nhớ đệm của tập lệnh không?

Cập nhật: tôi không thể kiểm soát được những người sử dụng plugin này trong tổ chức của chúng tôi và có thể không có khả năng thực thi các kịch bản không phải là đã có trên trang có hoặc không có một ID cụ thể, nhưng tên kịch bản sẽ luôn ở cùng một nơi với cùng tên. Tôi hy vọng tôi có thể sử dụng tên của kịch bản để xác minh nó thực sự được tải.

Trả lời

101

Nếu kịch bản tạo ra bất kỳ biến hoặc các chức năng trong không gian toàn cầu bạn có thể kiểm tra sự tồn tại của họ:

ngoài JS (trong phạm vi toàn cầu) -

var myCustomFlag = true; 

Và để kiểm tra nếu điều này đã chạy:

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

Cập nhật

Bạn có thể kiểm tra sự tồn tại của <script> thẻ trong câu hỏi bằng cách chọn tất cả các <script> yếu tố và kiểm tra src thuộc tính của chúng:

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

Hoặc bạn có thể chỉ nướng .filter() chức năng này ngay vào công cụ chọn:

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

Trong số phiếu bầu, nếu không tôi sẽ +1 câu trả lời này. – shanabus

+0

Đây là một câu trả lời hay, không may là phương thức jquery.getScript thêm tập lệnh mà không có nguồn nào được chỉ định. Vì vậy, tôi đã không thể tìm thấy nó. Tôi đã sử dụng một phần câu trả lời của bạn để giải quyết vấn đề này thành +1. – AGoodDisplayName

+0

@AGoodDisplayName Trong phần gọi lại cho '$ .getScript()', bạn có thể đặt cờ toàn cầu có thể được kiểm tra: '$ .getScript (', function() {window.myCustomFlag = true;}')'. Sau đó, bạn chỉ có thể kiểm tra sự tồn tại của phần tử '

3

Tạo thẻ tập lệnh bằng một ID cụ thể và sau đó kiểm tra xem ID đó có tồn tại không?

Cách khác, lặp qua thẻ tập lệnh để kiểm tra tập lệnh 'src' và đảm bảo rằng các tệp đó chưa được tải với cùng giá trị như giá trị bạn muốn tránh?

Edit: theo dõi phản hồi rằng một ví dụ mã sẽ có ích:

(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? 
    } 
})(); 
+1

+1 cho một câu trả lời tốt trước khi câu hỏi đã được cập nhật – zeroef

+0

Đây là giải pháp hoàn hảo. Tôi đề nghị thứ hai. –

+0

Thật tuyệt vời nếu có thể đặt mã với những ý tưởng này. –

6

này rất đơn giản bây giờ mà tôi nhận ra làm thế nào để làm điều đó, nhờ vào tất cả các câu trả lời để dẫn tôi đến giải pháp. Tôi đã phải từ bỏ $ .getScript() để xác định nguồn gốc của kịch bản ... đôi khi làm những việc thủ công là tốt nhất.

Giải pháp

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

Một cách khác để kiểm tra một kịch bản bên ngoài được nạp hay không, bạn có thể sử dụng dữ liệu chức năng của jquery và lưu trữ một lá cờ xác nhận. Ví dụ như:

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

Hoạt động tốt cho những gì tôi cần làm. cảm ơn –

1

Kết hợp một vài câu trả lời từ trên vào một cách dễ dàng để sử dụng chức năng

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); 
} 
Các vấn đề liên quan