srcでdocument.writeを含むスクリプトタグを動的に追加します。

Question

ウェブページにスクリプトタグを動的に含めることはできますが、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> 

を置くことは、正常に動作しますが、私は動的にinnerHTMLのようなものを使用してsource.jsを追加することができ、他の方法はありますか？

jsfiddle of what i've tried

Answer 1

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

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

document.head.appendChild(my_awesome_script); 

Answer 2

あなたはこのようなdocument.createElement()機能を使用することができます。

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

Answer 3

私は複数のスクリプトを読み込むために書いたスクリプト：

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

Answer 4

ちょっといい：ときに成功しましたスクリプトのロードと呼ばれるロード時機能はあり

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

Answer 5

これを行うための唯一の方法は、ページの一番下に要素を追加します独自の機能でdocument.writeを交換することです。これは、jQueryを使って、かなり単純です：

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

あなたがhtmlToWriteセグメントをバッファリングする必要があります質問の例のようにチャンクでdocument.writeをしてくるのhtmlを持っている場合。おそらく次のようなものです：

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

Answer 6

次のコードスニペットを試してみてください。

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