202

Web ページにスクリプト タグを動的に含めたいのですが、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

4

16 に答える 16

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

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

document.head.appendChild(my_awesome_script);
于 2012-10-29T12:51:29.383 に答える
115

document.createElement()次のような関数を使用できます。

function addScript( src ) {
  var s = document.createElement( 'script' );
  s.setAttribute( 'src', src );
  document.body.appendChild( s );
}
于 2012-10-29T12:51:30.700 に答える
20

複数のスクリプトをロードするために私が書いた素敵な小さなスクリプト:

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
});
于 2016-06-19T09:04:45.960 に答える
3

相互に依存するスクリプトを正しい順序でロードします。

Satyam Pathakの応答に基づいていますが、オンロードを修正しました。スクリプトが実際にロードされる前にトリガーされました。

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

于 2020-05-11T09:39:47.853 に答える
2

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

必要な数の JavaScript ファイルをロードするのに役立つユニバーサル関数の作成を呼び出すことができます。これに関する完全なチュートリアルがここにあります。

動的 Javascript を正しい方法で挿入する

于 2018-05-18T19:21:28.053 に答える
1

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)
  }
})()
于 2017-06-15T18:29:05.287 に答える