पेज लोड होने के बाद jQuery के माध्यम से <script> टैग कैसे डालें?

Question

मुझे काम करने में समस्या हो रही है। मैंने पहले अपने स्क्रिप्ट टैग को स्ट्रिंग्स के रूप में सेट करने की कोशिश की और फिर पेज लोड के बाद उन्हें दस्तावेज़ में जोड़ने के लिए jquery प्रतिस्थापन () का उपयोग किया:

var a = '<script type="text/javascript">some script here</script>';
$('#someelement').replaceWith(a);

लेकिन मुझे उस संस्करण पर स्ट्रिंग शाब्दिक त्रुटियाँ मिलीं। मैंने तब स्ट्रिंग को कूटने की कोशिश की जैसे:

var a = '&left;script type="text/javascript">some script here<\/script>';

लेकिन replaceWith()उस स्ट्रिंग को ब्राउज़र में भेजने के लिए आउटपुट भेजना ।

कृपया कोई मुझे बता सकता है कि आप <script>पेज लोड के बाद ब्राउज़र में टैग जोड़कर , आदर्श रूप से jQuery के माध्यम से कैसे गतिशील रूप से जुड़ेंगे?

Comments

क्या आप बता सकते हैं <script>कि दस्तावेज़ में एक टैग जोड़कर आप इसे क्या हासिल करना चाहते हैं?

— नुकीले

@ रॉकेट का जवाब सबसे अच्छा है, लेकिन अगर आप निश्चित रूप से एक स्ट्रिंग से इनलाइन स्क्रिप्ट जोड़ना चाहते हैं, तो आप इसे eval()फ़ंक्शन में पास करेंगे । लेकिन eval()लगभग हमेशा उपयोग से पता चलता है कि आप जो करने की कोशिश कर रहे हैं उसे करने का एक बेहतर तरीका है।

— निक

हम पेज के अंत तक 3 पार्टी विज्ञापनों की लोडिंग को स्थगित करने का प्रयास कर रहे हैं। उन विज्ञापनों को 2 स्क्रिप्ट टैग के माध्यम से बुलाया जाता है, इसलिए मैं पृष्ठ लोड के बाद एक फ़ंक्शन चलाना चाहता था जो उन्हें गतिशील रूप से फेंकता है।

— डग

सभी तृतीय-पक्ष लिपियों को अशुद्ध करने के लिए डिज़ाइन नहीं किया गया है। यदि स्क्रिप्ट का उपयोग करता है document.writeऔर आप इसे पृष्ठ लोड होने के बाद कहते हैं तो यह पृष्ठ को नष्ट कर देगा।

— बॉब

<iframe>तत्वों में उन टैगों को आयात क्यों नहीं किया ? <iframe>जब तक आप तैयार नहीं हो जाते आप URL सेट करना स्थगित कर सकते हैं।

— नुकीले

Answer 1

आप स्क्रिप्ट को एक अलग फ़ाइल में रख सकते हैं, फिर $.getScriptइसे लोड करने और चलाने के लिए उपयोग कर सकते हैं।

उदाहरण:

$.getScript("test.js", function(){
    alert("Running test.js");
});

Comments

धन्यवाद, लेकिन यह डोम में रहना होगा? मुझे पता है कि मैं उस महत्वपूर्ण जानकारी को छोड़ दिया है, कि मैं स्क्रिप्ट टैग की जरूरत है डोम में डाला, मूल्यांकन किया, जिस बिंदु पर यह एक विशिष्ट <div> में हमारी साइट पर प्रदर्शित करने के लिए 3 पार्टी विज्ञापन कोड देता है।

— डग

$.getScriptसिर्फ AJAX के माध्यम से एक .js फ़ाइल को लोड करेगा और इसे निष्पादित करेगा। स्क्रिप्ट को आपके पृष्ठ पर div का उपयोग करने में सक्षम होने के लिए DOM में होने की आवश्यकता नहीं है।

— रॉकेट हज़मत

लेकिन $.getScript()स्क्रिप्ट के साथ एक ही डोमेन या दोनों रिमोट डोमेन पर होना चाहिए और ब्राउज़र को समर्थन करने की आवश्यकता होगी CORS।

— हिप्पिट्रैएल

@hippietrail यह वास्तव में सच नहीं है। यह सिर्फ एक सादा ol 'स्क्रिप्ट टैग सम्मिलित करता है, जिसे CORS या समान-डोमेन की आवश्यकता नहीं होती है। मैं उदाहरण के लिए Google Analytics लोड करने के लिए कोड को छोटा करने के लिए इसका उपयोग करता हूं, और यह ठीक लोड करता है। पर्दे के पीछे वास्तविक जक्वरी कोड जो वास्तव में जीए स्निपेट के समान है, वास्तव में चलता है।

— क्रिस मॉसचिनि

चूँकि @hippietrail का उत्तर अपने 4 उत्थान के साथ सबसे अधिक ध्यान आकर्षित करेगा, इसलिए यह स्पष्ट रूप से स्पष्ट किया जाना चाहिए कि वह गलत है। जैसा कि jQuery के डॉक्स उनके $.ajaxनोटों में उजागर करते हैं: "स्क्रिप्ट और JSONP अनुरोध समान मूल नीति प्रतिबंधों के अधीन नहीं हैं।" स्रोत । दूसरे शब्दों में, $.getScript.js फ़ाइलों को अन्य डोमेन से खींच सकते हैं, न कि केवल अपना ।

— ग्यारहवें दिन

Answer 2

निम्नलिखित प्रयास करें:

<script type="text/javascript">
// Use any event to append the code
$(document).ready(function() 
{
    var s = document.createElement("script");
    s.type = "text/javascript";
    s.src = "http://scriptlocation/das.js";
    // Use any selector
    $("head").append(s);
});

http://api.jquery.com/append

Comments

appendस्क्रिप्ट जोड़ने के उपयोग के लिए +1 । परिशिष्ट इनलाइन स्क्रिप्ट का तुरंत मूल्यांकन करने का कारण बनता है (बस मुझे जो चाहिए)। धन्यवाद

— कोडिंग किया गया

मैं इस दृष्टिकोण के साथ IE8 / 9 में बहुत सारे मुद्दों को समाप्त करता हूं। नाममात्र ढेर अतिप्रवाह त्रुटियों। मैंने पूरे बोर्ड में यह काम करने के लिए $ .getScript () विधि का सहारा लिया।

— zmonteca

हाँ @jcoffland इस अक्टूबर 2010 में लिखा गया था :)

— Bassem

यदि इस कोड वाले पेज को AJAX का उपयोग करके लोड किया गया है, तो ब्राउज़र "सिंक्रोनस XMLHttpRequest को मुख्य थ्रेड पर फेंक देगा, क्योंकि उपयोगकर्ता के अंतिम अनुभव के लिए हानिकारक प्रभाव के कारण इसे हटा दिया गया है" चेतावनी।

— राजशेखर रेड्डी

@ रेड्डी शानदार टिप्पणी। यह अक्टूबर 2010 में पोस्ट किया गया था, मुझे यकीन है कि अब तक यह विधि वैध / अनुशंसित दृष्टिकोण नहीं है, उपयोगकर्ताओं को अपने विवेक पर आगे बढ़ना होगा।

— Bassem

Answer 3

यहाँ यह आधुनिक (2014) JQuery के साथ करने का सही तरीका है:

$(function () {
  $('<script>')
    .attr('type', 'text/javascript')
    .text('some script here')
    .appendTo('head');
})

या यदि आप वास्तव में एक डिव को बदलना चाहते हैं जो आप कर सकते हैं:

$(function () {
  $('<script>')
    .attr('type', 'text/javascript')
    .text('some script here')
    .replaceAll('#someelement');
});

Comments

या इसके बजाय .text ('कुछ स्क्रिप्ट यहाँ') आप लिख सकते हैं .attr ('src', 'path_to_your_js_file')

— Serhii Maksymchuk

Answer 4

एक सरल तरीका है:

$('head').append('<script type="text/javascript" src="your.js"></script>');

आप इस फॉर्म का उपयोग सीएसएस लोड करने के लिए भी कर सकते हैं।

Comments

आप </script>अपने स्रोत में स्ट्रिंग डालने से बचना चाह सकते हैं, हालांकि इससे पार्सिंग की समस्या हो सकती है: stackoverflow.com/questions/236073/…

— iX3

अंतिम से बचकर /मेरे लिए चाल $('head').append('<script src="your.js"><\/script>');

— चली

Answer 5

यह उत्तर तकनीकी रूप से समान या बराबर है जो जेकोफ्लैंड ने उत्तर दिया है। मैंने अभी पता लगाने के लिए एक क्वेरी जोड़ी कि क्या कोई स्क्रिप्ट पहले से मौजूद है या नहीं। मुझे इसकी आवश्यकता है क्योंकि मैं कुछ मॉड्यूल के साथ इंट्रानेट वेबसाइट में काम करता हूं, जिनमें से कुछ स्क्रिप्ट साझा कर रहे हैं या अपना स्वयं लाते हैं, लेकिन इन लिपियों को फिर से लोड करने की आवश्यकता नहीं है। मैं उत्पादन के माहौल में एक साल से अधिक समय से इस स्निपेट का उपयोग कर रहा हूं, यह एक आकर्षण की तरह काम करता है। खुद से टिप्पणी करना: हां मुझे पता है, यह पूछना अधिक सही होगा कि क्या कोई फ़ंक्शन मौजूद है ... :-)

if (!$('head > script[src="js/jquery.searchable.min.js"]').length) {
    $('head').append($('<script />').attr('src','js/jquery.searchable.min.js'));
}

Comments

btw। मैं स्टाइलशीट के साथ भी ऐसा ही करता हूं: अगर ($! > ')। Attr (' rel ',' स्टाइलशीट ')। Attr (' href ',' widgets / css / widgets.css '));}

— ddlab

Answer 6

एक काम है जो एक हैक की तरह लगता है और मैं मानता हूं कि यह इसे करने का सबसे सुंदर तरीका नहीं है, लेकिन 100% काम करता है:

कहो आपकी AJAX प्रतिक्रिया कुछ इस तरह है

<b>some html</b>
<script>alert("and some javscript")

ध्यान दें कि मैंने उद्देश्य पर समापन टैग को छोड़ दिया है। फिर उपरोक्त लोड करने वाली स्क्रिप्ट में, निम्नलिखित करें:

$.ajax({
    url: "path/to/return/the-above-js+html.php",
    success: function(newhtml){
        newhtml += "<";
        newhtml += "/script>";
        $("head").append(newhtml);
    }
});

बस मुझसे मत पूछो क्यों :-) यह उन चीजों में से एक है जो मैं लगभग बेतरतीब परीक्षणों के परिणामस्वरूप हताश और असफल हो गया हूं।

मेरे पास कोई सुझाव नहीं है कि यह कैसे काम करता है, लेकिन दिलचस्प रूप से पर्याप्त है, यदि आप एक पंक्ति में समापन टैग को जोड़ते हैं तो यह काम नहीं करेगा।

ऐसे समय में, मुझे लगता है कि मैंने सफलतापूर्वक शून्य से विभाजित किया है।

Comments

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

— कोडिंग हो गई

<\/script>हालांकि मान्य होगा

— SP

मुझे लगता है कि @ TrueBlueAussie का इशारा आपकी टिप्पणी के जवाब में था "बस मुझसे यह क्यों न पूछें ... लेकिन दिलचस्प रूप से पर्याप्त है, अगर आप एक पंक्ति में समापन टैग को जोड़ते हैं तो यह काम नहीं करेगा।" उन्होंने बताया कि ऐसा क्यों है कि कोई भी पाठक जो "मुझे नहीं पता" की तुलना में बेहतर उत्तर देना चाहते हैं, उसे आसानी से खोज सकते हैं। इसे भी देखें: javascript.crockford.com/script.html

— iX3

@ सात्विक सही है, उस लिंक के अनुसार। लगता है कि ऐश की टिप्पणी हटा दी गई है।

— अर्लेन बीलर

Answer 7

उदाहरण:

var a = '<script type="text/javascript">some script here</script>';
$('#someelement').replaceWith(a);

यह काम करना चाहिए। मैं इसे करने की कोशिश की; एक ही परिणाम। लेकिन जब मैंने इसका उपयोग किया:

var length = 1;
var html = "";
for (var i = 0; i < length; i++) {
    html += '<div id="codeSnippet"></div>';
    html += '<script type="text/javascript">';
    html += 'your script here';
    html += '</script>';
}
$('#someElement').replaceWith(a);

इसने मेरे लिए काम किया।

संपादित करें: मैं भूल गया #someelement(btw मैं #someElementसम्मेलनों के कारण उपयोग करना चाहते हो सकता है )

यहां सबसे महत्वपूर्ण चीज है + = इसलिए html को जोड़ा जाता है और प्रतिस्थापित नहीं किया जाता है।

एक टिप्पणी छोड़ दो अगर यह काम नहीं किया। मैं तुम्हारी मदद करना चाहता हूँ!

Answer 8

यहाँ एक बहुत स्पष्ट तरीका है - jQuery की कोई आवश्यकता नहीं है - जो एक स्क्रिप्ट को अंतिम बच्चे के रूप में जोड़ता है <body>:

document.body.innerHTML +='<script src="mycdn.js"><\/script>'

लेकिन अगर आप स्क्रिप्ट जोड़ना और लोड करना चाहते हैं तो रॉकेट हज़मत की विधि का उपयोग करें ।

Answer 9

यदि आप कुछ गतिशील रूप से उत्पन्न जावास्क्रिप्ट को चलाने की कोशिश कर रहे हैं, तो आप का उपयोग करके थोड़ा बेहतर होगा eval। हालाँकि, जावास्क्रिप्ट एक ऐसी गतिशील भाषा है जिसकी आपको वास्तव में आवश्यकता नहीं होनी चाहिए।

यदि स्क्रिप्ट स्थिर है, तो रॉकेट का getScript-suggestion जाने का रास्ता है।