2011-01-04 11 views
6

यह निर्धारित करने के लिए जावास्क्रिप्ट का उपयोग कैसे कर सकता हूं कि HTMLScriptElement पहले से ही पूरी तरह से लोड हो चुका है या नहीं?जावास्क्रिप्ट ऑनलोड ईवेंट - यह कैसे बताना है कि स्क्रिप्ट पहले से लोड हो चुकी है या नहीं?

मैं कैसे तय कर सकते हैं अगर एक गतिशील लोड स्क्रिप्ट ऑनलोड या onreadystate परिवर्तन की घटनाओं का उपयोग किए बिना लोड हो रहा है समाप्त हो गया है?

TOOL.loadScript = function (url, callback, reappend, deepSearch) { 
     var head, curr, child, tempScript, alreadyAppended, queue, 
     alreadyHandled, script, handler, loadFunc; 

     head = document.getElementsByTagName("head")[0]; 
     tempScript = document.createElement("script"); 
     tempScript.src = url; 
     alreadyAppended = false; 

     queue = []; 

     if (deepSearch) { 
     // search entire document 
     queue.push(document.firstElementChild); 
     } 
     else { 
     // just search the head element 
     queue.push(head); 
     } 

     while (queue.length !== 0) { 
     curr = queue.shift(); 

     // add child nodes to queue 
     child = curr.firstElementChild; 
     if (child !== null && child !== undefined) { 
      queue.push(child); 
      child = child.nextElementSibling; 
      while (child !== null && child !== undefined) { 
       queue.push(child); 
       child = child.nextElementSibling; 
      } 
     } 

     if (curr.tagName !== null && curr.tagName !== undefined) { 
      if (curr.tagName.toLowerCase() === "script" && curr.src === tempScript.src) { 
       script = curr; 
       alreadyAppended = true; 
       break; 
      } 
     } 
     } 

     if (!alreadyAppended) { 
     script = document.createElement("script"); 
     script.type = "text/javascript"; 
     script.async = true; 
     script.src = url; 
     } 

     alreadyHandled = false; 

     handler = function (event) { 
     console.log("handling event..."); 
     if (!alreadyHandled) { 
      if ((!event.readyState) || (event && (event.readyState === "loaded" || event.readyState === "complete"))) { 
       alreadyHandled = true; 
       callback.apply(script, [url]); 
       if (loadFunc) { 
        loadFunc.apply(script, arguments); 
       } 
      } 
     } 
     }; 

     if (script.onreadystatechange === undefined) { 
     loadFunc = script.onload; 
     script.onload = handler; 
     } 
     else { 
     loadFunc = script.onreadystatechange; 
     script.onreadystatechange = handler; 
     } 

मैं यहाँ मदद की जरूरत है:

कोड इस प्रकार है। मैं कॉलबैक फ़ंक्शन को आग लगाना चाहता हूं भले ही alreadyAppeneded === true और उसी स्क्रिप्ट को पहले ही लोड किया गया हो, लेकिन केवल तभी वह स्क्रिप्ट पूरी तरह से लोड हो गई हो।

 if (!alreadyAppended || (alreadyAppended && reappend)) { 
     head.appendChild(script); 
     } 
    }; 

नीचे पंक्ति: किस तरह तय करते मैं एक स्क्रिप्ट लोड हो रहा है पूरा कर लिया है तो क्या होगा? यदि आवश्यक हो तो कृपया मुझसे प्रश्न पूछें।

धन्यवाद।

उत्तर

2

आलसी कार्यान्वयन: एक सरणी बनाएं जिसका उपयोग आप सभी लोड की गई स्क्रिप्ट के स्रोत को धक्का देने के लिए कर सकते हैं, और जैसे ही वे लोड करते हैं, उन्हें सूची में दबाएं। प्रत्येक बार, यह देखने के लिए जांचें कि क्या दिया गया सरणी सरणी में है, और यदि यह है, तो तुरंत कॉलबैक को आग लगाना।

जब आप इसे जोड़ते हैं, लेकिन लोड नहीं होता है तो आप मामले के साथ क्या करते हैं। यदि आप कॉलबैक को आग लगाना चाहते हैं, लेकिन आप लोड होने के बाद इसे आग लगाना चाहते हैं, तो आप कुंजी के रूप में एक स्रोत के साथ एक एसोसिएटिव सरणी कर सकते हैं, और स्क्रिप्ट तत्व मान के रूप में। वहाँ से, मूल लपेटकर, इसलिए तरह से दो बार ऑनलोड या onreadystatechange आग बनाने:

var temponload = element.onreadystatechange || element.onload; 
if (element.onreadystatechange === undefined) 
    element.onload = function(e) { temponload(); temponload(); }; 
else 
    element.onreadystatechange = function (e) { temponload(); temponload(); }; 

आप अन्य कोड जो इस में हुक करने की आवश्यकता हो सकती है, लेकिन यह आप उम्मीद है कि शुरू कर दिया मिलना चाहिए।

1

जब आप एक स्क्रिप्ट लोड हो जाते हैं तो आप वास्तव में नहीं बता सकते हैं। आप जिस स्क्रिप्ट को जांचना चाहते हैं उसमें एक वैश्विक चर डाल सकते हैं और फिर इसकी उपस्थिति के लिए परीक्षण कर सकते हैं।

स्क्रिप्ट्स को गतिशील रूप से लोड करने के लिए लैब्स (लोडिंग और अवरुद्ध जावास्क्रिप्ट) नामक एक नई परियोजना है और इस प्रकार बताती है कि वे वास्तव में कब लोड होते हैं (http://blog.getify.com/2009/11/labjs-new- हॉटनेस-फॉर स्क्रिप्ट-लोडिंग/< - इसे जांचें)

3

स्क्रिप्ट तत्व में कोई आईडी क्यों नहीं जोड़ें? यदि आईडी जारी रखने से पहले से मौजूद है देखने के लिए जाँच करें ....

function includeJs(jsFilePath) { 

    if (document.getElementById(jsFilePath+"_script")) { 
    return; 
    } 
    var js = document.createElement("script"); 

    js.type = "text/javascript"; 
    js.id = jsFilePath+"_script"; 
    js.src = jsFilePath; 

    document.body.appendChild(js); 
} 
+3

नोट * यह है कि कुछ भी वास्तव में भरी हुई है, बस उस तत्व बनाया गया था सत्यापन नहीं करता। – Stephen

+0

मैन ... इस संभावना के बारे में मुझे याद दिलाने के लिए बहुत बहुत धन्यवाद। मैं एक ही पृष्ठ पर डुप्लिकेट स्क्रिप्ट डालने की समस्या को हल करने की कोशिश कर रहा था और अब यह तय हो गया है। अगर मैंने केवल 6 घंटे पहले देखा था। : डी –

संबंधित मुद्दे