webentwicklung-frage-antwort-db.com.de

Fügen Sie mit src dynamisch ein Skript-Tag hinzu, das document.write enthalten kann

Ich möchte ein Skript-Tag dynamisch in eine Webseite einfügen, habe aber keine Kontrolle über dessen Quellcode, so dass src = "source.js" möglicherweise so aussieht.

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

Jetzt gewöhnlich setzen

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

im Kopf funktioniert gut, aber gibt es eine andere Möglichkeit, source.js dynamisch mit so etwas wie innerHTML hinzuzufügen?

jsfiddle von dem, was ich versucht habe

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

Sie können die Funktion document.createElement() folgendermaßen verwenden:

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

Es gibt die Funktion onload, die aufgerufen werden kann, wenn das Skript erfolgreich geladen wurde:

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

ein nettes kleines Skript, das ich geschrieben habe, um mehrere Skripte zu laden:

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

verwendungszweck:

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

Sie können versuchen, den folgenden Codeausschnitt zu verwenden.

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

die einzige Möglichkeit, dies zu tun, besteht darin, document.write durch Ihre eigene Funktion zu ersetzen, die Elemente am Ende Ihrer Seite anfügt. Mit jQuery ist das ganz einfach:

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

Wenn Sie HTML-Code haben, der wie im Beispiel für eine Frage in die Datei document.write eingeht, müssen Sie die Segmente htmlToWrite puffern. Vielleicht so etwas:

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

Nun, es gibt mehrere Möglichkeiten, wie Sie dynamisches Javascript einbinden können. Ich verwende dieses für viele Projekte.

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

Sie können create eine universelle Funktion aufrufen, mit der Sie beliebig viele Javascript-Dateien laden können. Hier finden Sie eine vollständige Anleitung dazu.

Dynamisches Javascript richtig einfügen

1
Shubham Maurya

Ich habe es versucht, indem ich jedes Skript rekursiv angehängt habe

Hinweis Wenn Ihre Skripte nacheinander abhängen, muss die Position synchron sein.

Die Hauptabhängigkeit sollte im Array last sein, damit sie von den ersten Skripten verwendet werden kann

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