SQLの窓

2014年02月01日


JavaScript の function を外部に置いて、jQuery の ajax で読み出して SCRIPT 要素の innerHTML で動的に関数定義する

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



posted by lightbox at 2014-02-01 20:29 | Ajax:jQuery | このブログの読者になる | 更新情報をチェックする
container 終わり



フリーフォントで簡単ロゴ作成
フリーフォントでボタン素材作成
フリーフォントで吹き出し画像作成
フリーフォントではんこ画像作成
ほぼ自由に利用できるフリーフォント
フリーフォントの書体見本とサンプル
画像を大きく見る為のウインドウを開くボタンの作成

CSS ドロップシャドウの参考デモ
イラストAC
ぱくたそ
写真素材 足成
フリーフォント一覧
utf8 文字ツール
右サイド 終わり
base 終わり