javascript - Agregue dinámicamente la etiqueta de script con src que puede incluir document.write

Question

Quiero incluir dinámicamente una etiqueta de script en una página web, pero no tengo control de ella, así que src = "source.js" puede verse así.

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

Ahora ordinariamente poniendo

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

en la cabeza funciona bien, pero ¿hay alguna otra forma en que pueda agregar source.js dinámicamente usando algo como innerHTML?

jsfiddle de lo que he intentado

Answer 1

Bueno, hay varias maneras en que puede incluir javascript dinámico, yo uso este para muchos de los proyectos.

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

Puede llamar a crear una función universal que puede ayudarle a cargar tantos archivos javascript como sea necesario. Hay un tutorial completo sobre esto aquí.

Insertar Javascript dinámico de la manera correcta

Answer 2

Existe la función de carga, que podría invocarse cuando el script se haya cargado correctamente:

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

Answer 3

Puede intentar seguir el fragmento de código.

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

Answer 4

Puede usar la función document.createElement() como esta:

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

Answer 5

la única forma de hacerlo es reemplazar document.write con su propia función que agregará elementos al pie de la página. Es bastante sencillo con jQuery:

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

Si tiene html llegando a document.write en fragmentos como el ejemplo de la pregunta, tendrá que almacenar en búfer los segmentos htmlToWrite . Tal vez algo como esto:

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

Answer 6

un pequeño y agradable script que escribí para cargar varios scripts:

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

uso:

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

Answer 7

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

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

document.head.appendChild(my_awesome_script);