HTML5データ文字列をJavaScript（evalなし）として実行しますか？

Question

私は、次のdiv持っている：私はこのようなJavaSciptの関数としてのdivのコールバック文字列を実行できるようにしたい

<div id="foo" data-callback="function(){console.log(1)}"></div>

：

($('#foo').data('callback'))()

をしかし、これは明らかにしません作業。これを行う方法はありますか？

ここにはJSFiddleがあります。

Answer 1

私はようなコードを格納していないことをお勧め3210属性。関数を作成し、その関数名を属性として保存してください。

<script> 
function callbackA(){ 
    console.log(1) 
} 
</script> 
<div id="foo" data-callback="callbackA"></div> 

次に、window[$('#foo').data('callback')]()を実行できます。

編集：これをやりたくない場合は、onclickイベント（またはその問題についての（組み込み）イベント）を使用することもできます。

<div id="foo" onclick="console.log(1)"></div> 

その後、あなたは（関数として）イベントを取得するために.propを使用し、それを使用することができます。

var callback = $('#foo').prop('onclick'); // get function 
$('#foo').removeProp('onclick'); // remove event 
callback(); // use function 

Answer 2

evalを使用して行うことができますが、evalはevilです。

編集：

そして、いくつかのmodifictionがあなたのHTMLに必要とされ、

<div id="foo" data-callback="(function(){console.log(1)})"></div> 

JS

eval($('#foo').data('callback'))(); 

DEMO

Answer 3

いつもFunctionコンストラクタを使用できますが、文だけを含む文字列が必要です。ソースでそのデータ属性の値を変更できる場合は、既存の文字列を解析するか、さらにはそれをさらに解析することができます。あなたが行うことができ、その後

<div id="foo" data-callback="{console.log(1)}"></div> 

にHTMLを変更することができれば、あなたは

var fn = new Function($("#foo").data("callback")); 
fn(); 

Updated JSFiddle

Answer 4

を行うだろう

new Function($('#foo').data('callback'))() 

---

しかし、なぜあなたはが必要ですそのようにするには？

Answer 5

解決策は、js.jsを使用することです。これはevalより安全です。