Динамически добавить тег сценария с помощью src, который может включать document.write

Я хочу динамически включать тег сценария в веб-страницу, однако я не могу контролировать его src, поэтому 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 из того, что я пробовал

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 < 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
}, '<div>innerHTML</div>', 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");
    }
}

Когда скрипты загружаются асинхронно, они не могут вызывать 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);

Ну, есть несколько способов включить динамический 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сегменты. Может быть, что-то вроде этого:

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) => {
  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])

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

Основано на ответе Сатьям Патхака , но исправлено. Он был запущен до того, как скрипт действительно загрузился.

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

Вот сокращенный фрагмент, такой же код, как 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.body.appendChild(document.createElement('script')).src = 'source.js';