以JavaScript（无eval）执行HTML5数据字符串？

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

一个，可能是疯狂的:)，解决方案是使用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'))();

DEMO

Answer 5

您始终可以使用Function构造函数，但是，您将需要一个仅包含您的语句的字符串。如果可以在源处修改该数据属性的值，则可以解析现有字符串，甚至更好。然后你会做

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

<强> Updated JSFiddle