Dynamicznie dodawaj znacznik skryptu z src, który może zawierać document.write

Question

Chcę dynamicznie dołączać znacznik skryptu na stronie internetowej, ale nie mam kontroli nad jego src, więc src = "source.js" może wyglądać tak.

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

Teraz zwykle oddanie

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

w głowie działa dobrze, ale czy jest jakiś inny sposób mogę dodać source.js dynamicznie przy użyciu coś jak 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

Można użyć funkcji document.createElement() takiego:

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

Answer 3

There Is onload funkcję, która ma zostać wykonana kiedy Script obciążenia Pomyślnie:

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

Answer 4

miły mały skrypt napisałem, aby załadować wiele skryptów:

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

Wykorzystanie:

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

Answer 5

jedynym sposobem, aby to zrobić, to wymienić document.write z własnej funkcji, która dołączy elementy na dole strony. Jest to dość proste z jQuery:

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

Jeśli masz html przyjście do document.write w kawałkach takich jak np zapytania trzeba buforować segmenty htmlToWrite. Może coś takiego:

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

Answer 6

Możesz wypróbować następujący fragment kodu.

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