Я хочу динамически включить тег сценария в веб-страницу, однако я не контролирую его src, поэтому src = «source.js» может выглядеть следующим образом.

document.write('{amp}lt;script type="text/javascript"{amp}gt;') document.write('alert("hello world")') document.write('{amp}lt;/script{amp}gt;') document.write('{amp}lt;p{amp}gt;goodbye world{amp}lt;/p{amp}gt;') 

Сейчас выкладываю

 {amp}lt;script type="text/javascript" src="source.js"{amp}gt;{amp}lt;/script{amp}gt; 

в голове работает нормально, но есть ли другой способ динамически добавить source.js, используя что-то вроде innerHTML?

jsfiddle из того, что я пробовал

 var my_awesome_script = document.createElement('script'); my_awesome_script.setAttribute('src','http://example.com/site.js'); document.head.appendChild(my_awesome_script); 

Вы можете использовать функцию document.createElement() следующим образом:

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

Существует функция onload , которая может быть вызвана после успешной загрузки скрипта:

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

хороший маленький скрипт, который я написал для загрузки нескольких скриптов:

 function scriptLoader(scripts, callback) { var count = scripts.length; function urlCallback(url) { return function () { console.log(url   ' was loaded ('   --count   ' more scripts remaining).'); if (count {amp}lt; 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 }); 

Вы можете попробовать следующий фрагмент кода.

 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 }, '{amp}lt;div{amp}gt;innerHTML{amp}lt;/div{amp}gt;', function(){}); 

Это работа для меня.

Вы можете проверить это.

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

Ну, есть несколько способов включить динамический JavaScript, я использую его для многих проектов.

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

Вы можете вызвать create универсальную функцию, которая может помочь вам загрузить столько файлов javascript, сколько необходимо. Здесь есть полное руководство по этому вопросу.

Вставка динамического Javascript правильным способом

единственный способ сделать это — заменить document.write своей собственной функцией, которая будет добавлять элементы внизу вашей страницы. Это довольно просто с jQuery:

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

Если у вас есть html, поступающий в document.write в виде блоков, как в примере с вопросом, вам нужно будет htmlToWrite сегменты htmlToWrite . Может быть, что-то вроде этого:

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

Я попробовал это, рекурсивно добавляя каждый скрипт

Примечание. Если ваши сценарии зависят друг от друга, положение должно быть синхронизировано.

Основная зависимость должна быть последней в массиве, чтобы ее могли использовать начальные сценарии

 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) ={amp}gt; { const el = document.createElement('script') el.src = script if(count {amp}lt; scripts.length) { count    el.onload = recursivelyAddScript(scripts[count]) document.body.appendChild(el) } else { console.log('All script loaded') return } } recursivelyAddScript(scripts[count]) 

Вот сокращенный фрагмент, такой же код, как Google Analytics и Facebook Pixel:

 !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 на ваш путь к скрипту.

Когда скрипты загружаются асинхронно, они не могут вызывать document.write. Звонки будут просто проигнорированы, и на консоль будет записано предупреждение.

Вы можете использовать следующий код для динамической загрузки скрипта:

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