web-dev-qa-db-fra.com

Ajouter dynamiquement une balise de script avec src pouvant inclure document.write

Je souhaite inclure de manière dynamique une balise de script dans une page Web, mais je n'ai aucun contrôle sur sa source, donc src = "source.js" peut ressembler à ceci.

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

Maintenant, mettant habituellement

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

dans la tête fonctionne bien mais est-il possible d'ajouter source.js de façon dynamique en utilisant quelque chose comme innerHTML?

jsfiddle de ce que j'ai essayé

javascriptsrcdocument.write
124
Cadell Christo
var my_awesome_script = document.createElement('script');

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

document.head.appendChild(my_awesome_script);
170
dmp

Vous pouvez utiliser la fonction document.createElement() comme ceci:

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

Il y a la fonction onload, qui pourrait être appelée une fois le script chargé:

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

un joli petit script que j'ai écrit pour charger plusieurs 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);
    }
};

usage:

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

Vous pouvez essayer de suivre l'extrait de code.

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(){});
3
vaenow

la seule façon de faire est de remplacer document.write par votre propre fonction qui ajoutera des éléments au bas de votre page. C'est assez simple avec jQuery:

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

Si html arrive dans document.write en morceaux comme dans l'exemple de la question, vous devrez mettre en mémoire tampon les segments htmlToWrite. Peut-être quelque chose comme ça:

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

Eh bien, il existe de nombreuses façons d'inclure du javascript dynamique. J'utilise celui-ci pour de nombreux projets.

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

Vous pouvez appeler créer une fonction universelle qui peut vous aider à charger autant de fichiers javascript que nécessaire. Il y a un tutoriel complet à ce sujet ici.

Insérer le Javascript dynamique dans le bon sens

1
Shubham Maurya

Je l'ai essayé en ajoutant récursivement chaque script

Note Si vos scripts dépendent les uns des autres, la position devra être synchronisée.

La dépendance majeure doit figurer en dernier dans array pour que les scripts initiaux puissent l'utiliser

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])
0
Satyam Pathak