डायनामिक रूप से src के साथ स्क्रिप्ट टैग जोड़ें, जिसमें document.write शामिल हो सकता है

Question

मैं गतिशील रूप से एक वेबपेज में एक स्क्रिप्ट टैग को शामिल करना चाहता हूं, हालांकि मेरा इस पर कोई नियंत्रण नहीं है इसलिए src = "source.js" इस तरह दिख सकता है।

document.write('<script type="text/javascript">')
document.write('alert("hello world")')
document.write('</script>')
document.write('<p>goodbye world</p>')

अब आम तौर पर डाल रहा है

<script type="text/javascript" src="source.js"></script> 

सिर ठीक काम करता है, लेकिन क्या ऐसा कोई और तरीका है जिससे मैं source.js को डायनामिक रूप से इनरएचटीएमएल जैसी किसी चीज़ का उपयोग करके जोड़ सकता हूं?

मैं क्या करने की कोशिश की है jsfiddle

Comments

घंटों के संघर्ष के बाद समाधान है! https://github.com/krux/postscribe/

— कैडेल क्रिस्टो

दस्तावेज़ के साथ async लोड हो रहा है जावास्क्रिप्ट

— राइट

Answer 1

var my_awesome_script = document.createElement('script');

my_awesome_script.setAttribute('src','http://example.com/site.js');

document.head.appendChild(my_awesome_script);

Answer 2

आप document.createElement()इस तरह फ़ंक्शन का उपयोग कर सकते हैं :

function addScript( src ) {
  var s = document.createElement( 'script' );
  s.setAttribute( 'src', src );
  document.body.appendChild( s );
}

Comments

आप इसे कैसे बना देंगे?

— UKDataGeek

@ मोबाइल ब्लॉके: s.async = true;

— axlotl

s.setAttribute ('src', src); हो सकता है s.src = src (मुझे लगता है?) मुझे पता है कि यह

— पीसीजी

Answer 3

नहीं है onloadसमारोह, कि जब स्क्रिप्ट सफलतापूर्वक लोड किया गया है कहा जा सकता है:

function addScript( src,callback) {
  var s = document.createElement( 'script' );
  s.setAttribute( 'src', src );
  s.onload=callback;
  document.body.appendChild( s );
}

Comments

कुछ नया सीखा। अच्छा!

— मिश्रण

Answer 4

एक अच्छी छोटी स्क्रिप्ट जिसे मैंने कई स्क्रिप्ट लोड करने के लिए लिखा था:

function scriptLoader(scripts, callback) {

    var count = scripts.length;

    function urlCallback(url) {
        return function () {
            console.log(url + ' was loaded (' + --count + ' more scripts remaining).');
            if (count < 1) {
                callback();
            }
        };
    }

    function loadScript(url) {
        var s = document.createElement('script');
        s.setAttribute('src', url);
        s.onload = urlCallback(url);
        document.head.appendChild(s);
    }

    for (var script of scripts) {
        loadScript(script);
    }
};

उपयोग:

scriptLoader(['a.js','b.js'], function() {
    // use code from a.js or b.js
});

Comments

क्षमा करें ... बस एक बेहतर है कि निर्भरता stackoverflow.com/a/1867135/678780

— EliSherer

Answer 5

आप निम्नलिखित कोड स्निपेट आज़मा सकते हैं।

function addScript(attribute, text, callback) {
    var s = document.createElement('script');
    for (var attr in attribute) {
        s.setAttribute(attr, attribute[attr] ? attribute[attr] : null)
    }
    s.innerHTML = text;
    s.onload = callback;
    document.body.appendChild(s);
}

addScript({
    src: 'https://www.google.com',
    type: 'text/javascript',
    async: null
}, '<div>innerHTML</div>', function(){});

Answer 6

यह मेरे लिए काम है।

तुम उसे देख सकते हो।

var script_tag = document.createElement('script');
script_tag.setAttribute('src','https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js');
document.head.appendChild(script_tag);
window.onload = function() {
    if (window.jQuery) {  
        // jQuery is loaded  
        alert("ADD SCRIPT TAG ON HEAD!");
    } else {
        // jQuery is not loaded
        alert("DOESN'T ADD SCRIPT TAG ON HEAD");
    }
}

Answer 7

जब स्क्रिप्ट को अतुल्यकालिक रूप से लोड किया जाता है तो वे डॉक्यूमेंट नहीं लिख सकते हैं। कॉल को केवल अनदेखा किया जाएगा और कंसोल को एक चेतावनी लिखी जाएगी।

आप स्क्रिप्ट को लोड करने के लिए निम्न कोड का उपयोग कर सकते हैं:

var scriptElm = document.createElement('script');
scriptElm.src = 'source.js';
document.body.appendChild(scriptElm);

यह दृष्टिकोण तभी अच्छा काम करता है जब आपका स्रोत किसी भिन्न फ़ाइल का हो।

लेकिन अगर आपके पास इनलाइन फ़ंक्शंस के रूप में स्रोत कोड है जिसे आप गतिशील रूप से लोड करना चाहते हैं और स्क्रिप्ट टैग, जैसे वर्ग, प्रकार, आदि में अन्य विशेषताओं को जोड़ना चाहते हैं, तो निम्नलिखित स्निपेट आपकी मदद करेंगे:

var scriptElm = document.createElement('script');
scriptElm.setAttribute('class', 'class-name');
var inlineCode = document.createTextNode('alert("hello world")');
scriptElm.appendChild(inlineCode); 
target.appendChild(scriptElm);

Answer 8

खैर, ऐसे कई तरीके हैं जिनसे आप गतिशील जावास्क्रिप्ट को शामिल कर सकते हैं, मैं इस एक का उपयोग कई परियोजनाओं के लिए करता हूं।

var script = document.createElement("script")
script.type = "text/javascript";
//Chrome,Firefox, Opera, Safari 3+
script.onload = function(){
console.log("Script is loaded");
};
script.src = "file1.js";
document.getElementsByTagName("head")[0].appendChild(script);

आप एक सार्वभौमिक फ़ंक्शन बना सकते हैं जो आपको आवश्यकतानुसार कई जावास्क्रिप्ट फ़ाइलों को लोड करने में मदद कर सकता है। यहाँ इस बारे में एक पूर्ण ट्यूटोरियल है।

डायनामिक जावास्क्रिप्ट को सही तरीके से सम्मिलित करना

Comments

फी, लिंक काम नहीं कर रहा है, मुझे लेख कहीं और नहीं मिला।

— user1063287

Answer 9

ऐसा करने का एकमात्र तरीका document.writeअपने स्वयं के फ़ंक्शन के साथ प्रतिस्थापित करना है जो आपके पृष्ठ के निचले भाग में तत्वों को जोड़ देगा। यह jQuery के साथ बहुत सीधा है:

document.write = function(htmlToWrite) {
  $(htmlToWrite).appendTo('body');
}

यदि आपके पास HTML है तो डॉक्युमेंट्स में लिखें। प्रश्न जैसे उदाहरण आपको htmlToWriteसेगमेंट को बफ़र करने की आवश्यकता होगी । शायद कुछ इस तरह:

document.write = (function() {
  var buffer = "";
  var timer;
  return function(htmlPieceToWrite) {
    buffer += htmlPieceToWrite;
    clearTimeout(timer);
    timer = setTimeout(function() {
      $(buffer).appendTo('body');
      buffer = "";
    }, 0)
  }
})()

Answer 10

मैंने प्रत्येक स्क्रिप्ट को पुनरावर्ती रूप से जोड़कर इसे आज़माया

नोट यदि आपकी स्क्रिप्ट एक के बाद एक निर्भर हैं, तो स्थिति को सिंक में होना आवश्यक है।

मेजर डिपेंडेंसी एरे में आखिरी होनी चाहिए ताकि शुरुआती स्क्रिप्ट इसका इस्तेमाल कर सकें

const scripts = ['https://www.gstatic.com/firebasejs/6.2.0/firebase-storage.js', 'https://www.gstatic.com/firebasejs/6.2.0/firebase-firestore.js', 'https://www.gstatic.com/firebasejs/6.2.0/firebase-app.js']
let count = 0

  
 const recursivelyAddScript = (script, cb) => {
  const el = document.createElement('script')
  el.src = script
  if(count < scripts.length) {
    count ++
    el.onload = recursivelyAddScript(scripts[count])
    document.body.appendChild(el)
  } else {
    console.log('All script loaded')
    return
  }
}
 
  recursivelyAddScript(scripts[count])

Answer 11

लोड स्क्रिप्ट जो एक दूसरे पर सही क्रम के साथ निर्भर करती है।

सत्यम पाठक की प्रतिक्रिया के आधार पर , लेकिन भार को निर्धारित किया गया। यह वास्तव में भरी हुई स्क्रिप्ट से पहले ट्रिगर किया गया था।

const scripts = ['https://www.gstatic.com/firebasejs/6.2.0/firebase-storage.js', 'https://www.gstatic.com/firebasejs/6.2.0/firebase-firestore.js', 'https://www.gstatic.com/firebasejs/6.2.0/firebase-app.js']
let count = 0

  
 const recursivelyAddScript = (script, cb) => {
  const el = document.createElement('script')
  el.src = script
  if(count < scripts.length) {
    count ++
    el.onload = () => recursivelyAddScript(scripts[count])
    document.body.appendChild(el)
  } else {
    console.log('All script loaded')
    return
  }
}
 
  recursivelyAddScript(scripts[count])

Answer 12

यहाँ एक छोटा स्निपेट है, जो Google Analytics और Facebook पिक्सेल के समान कोड का उपयोग करता है:

!function(e,s,t){(t=e.createElement(s)).async=!0,t.src="https://example.com/foo.js",(e=e.getElementsByTagName(s)[0]).parentNode.insertBefore(t,e)}(document,"script");

https://example.com/foo.jsअपने स्क्रिप्ट पथ के साथ बदलें ।

Answer 13

एक-लाइनर (हालांकि उपरोक्त उत्तरों के लिए कोई आवश्यक अंतर नहीं):

document.body.appendChild(document.createElement('script')).src = 'source.js';