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

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

Ответ 1

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

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

document.head.appendChild(my_awesome_script);

Ответ 2

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

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

Ответ 3

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

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

Ответ 4

a nice little script Я написал для загрузки нескольких скриптов:

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

Ответ 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(){});

Ответ 6

единственный способ сделать это - заменить 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)
  }
})()

Ответ 7

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

Ответ 8

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

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

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

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