通常の 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 + ") " );
}
|
|
