通常の div 等の innerHTML に script 要素ごと文字列設定はできませんが、script 要素に対して innerHTML に関数文字列をセットすると、関数が作成されます。但し、上書きはできないので同名の関数は追加で script 要素が必要になります。 しかし、この script 要素を削除しても、関数そのものはメモリに残るようなので、ここでは script 要素は削除しています。( デベロッパーツールで見てみると script 要素がなくなっていました ) 外部のテキストは、Google の仮想ディレクトリを使って設置しています( access-control-allow-origin:* を返してくれます )
<script> if ( !window.jQuery ) { document.write("<"+"script src=\"//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js\"></"+"script>"); } </script> <script type="text/javascript"> function set_script1() { $.get( "https://googledrive.com/host/0B9Jymqpro6gSVlB5Wm52U29wTlE/ajax/functionByAjax.txt", function(data) { var obj = document.createElement("script"); document.body.appendChild(obj); obj.innerHTML = data; document.body.removeChild(obj); }); } function set_script2() { var obj = document.createElement("script"); document.body.appendChild(obj); obj.innerHTML = "function message2(p) { alert(\"2:\"+p) }"; document.body.removeChild(obj); } </script> <input type="button" value="定義1実行" onclick='set_script1()'> <input type="button" value="定義2実行" onclick='set_script2()'> <input type="button" value="実行1" onclick='functionByAjax("こんにちは")'> <input type="button" value="実行2" onclick='message2("こんにちは")'>
定義1 は、外部からの取り出しです。内容は以下のようになっています。 https://googledrive.com/host/0B9Jymqpro6gSVlB5Wm52U29wTlE/ajax/functionByAjax.txt
function functionByAjax(a) { alert( "\u30e1\u30c3\u30bb\u30fc\u30b8 : (" + a + ") " ); }
|