2011-09-05 15 views
12

लिए प्रतीक्षा कर रहा मेरा पेज शरीर में, मैं एक AJAX कॉल के परिणाम के रूप में इस कोड डालने के लिए की जरूरत है:गतिशील लोड स्क्रिप्ट

<p>Loading jQuery</p> 
    <script type='text/javascript' src='scripts/jquery/core/jquery-1.4.4.js'></script> 
    <p>Using jQuery</p> 
    <script type='text/javascript'> 
     $.ajax({ 
      ... 
     }); 
    </script> 

मैं $.load() उपयोग नहीं कर सकते क्योंकि दस्तावेज़ पहले से ही भरी हुई है, इसलिए घटना आग नहीं है

यह सुरक्षित है? यदि नहीं, तो मैं कैसे सुनिश्चित करूं कि jquery स्क्रिप्ट मेरे कस्टम से पहले लोड हो गई है, जेनरेट कोड निष्पादित किया गया है।

+1

चेक इस संबंधित जवाब बाहर जावास्क्रिप्ट में इसे करने के लिए एक लोड श्रोता जोड़ने 38840724/2247494) ** – jherax

उत्तर

16

यह बहुत सुरक्षित है। ऐतिहासिक रूप से, <script> टैग, पूर्ण अवरुद्ध कर रहे हैं इसलिए दूसरा <script> टैग का सामना नहीं कर सकते हैं befored पूर्व पार्स/excuting समाप्त हो गया है। केवल समस्या यह हो सकती है कि "आधुनिक" ब्राउज़र स्क्रिप्ट को असीमित रूप से और स्थगित कर देते हैं। तो यकीन है कि आदेश सही है, इस तरह इसका इस्तेमाल:

<p>Loading jQuery</p> 
<script type='text/javascript' async=false defer=false src='scripts/jquery/core/jquery-1.4.4.js'></script> 
<p>Using jQuery</p> 
<script type='text/javascript'> 
    $.ajax({ 
     ... 
    }); 
</script> 

हालांकि, यह शायद एक बेहतर विचार यह बजाय डोम में HTML स्ट्रिंग के रूप में आगे बढ़ाने के गतिशील स्क्रिप्ट टैग प्रविष्टि का उपयोग है। एक ही कहानी होगी

var scr = document.createElement('script'), 
    head = document.head || document.getElementsByTagName('head')[0]; 
    scr.src = 'scripts/jquery/core/jquery-1.4.4.js'; 
    scr.async = false; // optionally 

head.insertBefore(scr, head.firstChild); 
+2

क्या 'appendChild'' के बजाय 'insertBefore' का उपयोग करने का कोई फायदा है? – Joe

+6

आधुनिक ब्राउज़र केवल 'async' और 'defer' निर्दिष्ट किए गए स्क्रिप्ट को असुरक्षित रूप से निष्पादित या निष्पादित करते हैं। HTML में 'async = false' और' defer = false' पूरी तरह से अनावश्यक है। हालांकि, गतिशील रूप से बनाई गई स्क्रिप्ट को 'async' डिफ़ॉल्ट रूप से सत्य पर सेट किया गया है, यही कारण है कि आपको दूसरे कोड नमूने में' scr.async = false; 'की आवश्यकता है। देखें http://www.html5rocks.com/en/tutorials/speed/script-loading/ – Flimm

0

$ .ajax और $ .load एक ही चीज़ है। आप या तो उपयोग कर सकते हैं। यदि आप पृष्ठ पर एक स्क्रिप्ट टैग में $ .load डालते हैं तो यह $ .ajax() की तरह लोड होने पर आग लग जाएगा।

यह आग इससे पहले कि आप कुछ क्या Tomalak कहा थोड़े सच है कर एक स्क्रिप्ट के लिए इंतजार की बात आती है। अपवाद अतुल्यकालिक कॉल है। जावास्क्रिप्ट एक एजेक्स कॉल करेगा, फिर स्क्रिप्ट को जारी रखेगा और जब AJAX कॉल का जवाब होगा तो यह आपके द्वारा किए जाने वाले कार्यों के आधार पर सफलता/असफलता को चलाएगा।

अब कहें कि आप चाहते हैं कि आपका जेएस वापसी के लिए प्रतीक्षा करे, एक कॉल के साथ यह सफलतापूर्वक कॉलबैक में हर चीज़ को लपेटता है, या आप इसे शांत तरीके से कर सकते हैं और $ .deferred का उपयोग कर सकते हैं। यह आपको AJAX कॉल या एक का गुच्छा बनाने की अनुमति देता है और फिर खत्म होने के बाद ही कुछ कोड चलाता है।

$। जब & $। तो शायद इस स्थिति के लिए सबसे अच्छा है।

किसी भी तरह से अपने क्या कर रहे हैं सुरक्षित है।

8

वहाँ भी jQuery 1.6 में नई सुविधा है। इसे jQuery.holdReady() कहा जाता है। यह वास्तव में आत्म व्याख्यात्मक है; जब आप jQuery.holdReady(true) पर कॉल करते हैं, ready ईवेंट तब तक नहीं निकाल दिया जाता जब तक कि आप jQuery.holdReady(false) पर कॉल न करें। इसे गलत पर सेट करने से स्वचालित रूप से एक तैयार ईवेंट नहीं आ जाएगा, यह केवल होल्ड को हटा देता है।

$.holdReady(true); 
$.getScript("myplugin.js", function() { 
    $.holdReady(false); 
}); 

http://api.jquery.com/jQuery.holdReady/ अधिक जानकारी

13

के लिए अपनी स्क्रिप्ट फाइल करने के लिए एक आईडी जोड़ें ताकि आप उसे क्वेरी कर सकते हैं:

यहाँ एक स्क्रिप्ट प्रलेखन से लिया लोड हो रहा है की एक गैर अवरुद्ध उदाहरण है। ** [गतिशील रूप से जोड़ा स्क्रिप्ट टैग की लोड आदेश] (http://stackoverflow.com/a/:

<script id="hljs" async src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.0.0/highlight.min.js"></script> 

फिर

<script> 
    var script = document.querySelector('#hljs'); 
    script.addEventListener('load', function() { 
    hljs.initHighlightingOnLoad(); 
    }); 
</script> 
+1

अच्छी तरह से किया गया, धन्यवाद – onalbi

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