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

Question

私は次のdivを持っています：

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

divのコールバック文字列を次のようなJavaScipt関数として実行できるようにしたいと思います。

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

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

これがJSFiddleです。

Answer 1

コードを属性として保存しないことをお勧めしdata-ます。関数を作成し、関数名を属性として保存するだけです。

<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

クレイジーな可能性がある :) 解決策の 1 つは、js.jsを使用することです。これは より安全ですeval。

Answer 3

htmlを次のように変更できる場合

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

それからあなたはすることができます

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

---

しかし、なぜそのようにする必要があるのでしょうか?

Answer 4

あなたが持っていることは を使用して行うことができますがeval、eval は悪です。

編集：

また、HTML にいくつかの変更が必要です。

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

JS

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

デモ

Answer 5

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

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

更新された JSFiddle