गतिशील रूप से src के साथ स्क्रिप्ट टैग जोड़ें जिसमें दस्तावेज़ शामिल हो सकता है .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 गतिशील innerHTML की तरह कुछ का उपयोग कर जोड़ सकते हैं?

jsfiddle of what i've tried

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,callback) { 
    var s = document.createElement('script'); 
    s.setAttribute('src', src); 
    s.onload=callback; 
    document.body.appendChild(s); 
} 

Answer 3

वहाँ ऑनलोड समारोह जब सफलतापूर्वक स्क्रिप्ट लोड के नाम से जाना कि है स्क्रिप्ट मैंने कई स्क्रिप्ट लोड करने के लिए लिखा:

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

Answer 4

एक अच्छी छोटी:

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

Answer 5

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

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

आप html सवाल उदाहरण की तरह मात्रा में document.write के लिए आ रहा है, तो आप htmlToWrite क्षेत्रों बफ़र की आवश्यकता होगी। शायद इस तरह कुछ:

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

Answer 6

आप कोड स्निपेट का पालन करने का प्रयास कर सकते हैं।

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