javascript - 動的JSコードをDOM構造にロードするには?

Question

実行時にロードする必要がある JS 要素を含む HTML があります。

これらは、私が探している機能を説明するためのサンプル ファイルです。

ファイル 1: index.html

<div id="mydiv"> </div>
<script type="text/javascript">
   xmlhttp=new XMLHttpRequest();
   xmlhttp.open("GET","script.php",false);
   xmlhttp.send();
   var text=xmlhttp.responseText;
   var elem=document.getElementById("mydiv")
   elem.innerHTML=text
   func() 
</script>    

ファイル 2: script.php

<script type="text/javascript">
   function func(){
       alert("func")
   }
</script>

ブラウザから返されたエラー:

インライン スクリプト スレッド
キャッチされない例外: ReferenceError: 未定義の変数: func localhost/my_project/ の 20 行目、列 0 でスローされるエラー: func()

Answer 1

.innerHTMLhtml 内のスクリプト要素を実行しません。

これを試して：

xmlhttp=new XMLHttpRequest();
xmlhttp.open("GET","script.php",false);
xmlhttp.send();
var text=xmlhttp.responseText;

var root = document.createElement("div");
root.innerHTML = text;
var scripts = root.getElementsByTagName("script");

for( var i = 0; i < scripts.length; ++i ) {
    var code = scripts[i].innerText || scripts[i].textContent || scripts[i].innerHTML || "";
    eval(code);
}

func();