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

一，可能很疯狂:)，解决方案是使用js.js。这将比eval.

Answer 3

如果您可以将 html 更改为

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

那么你可以做

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

---

但是为什么你需要这样做呢？

Answer 4

您可以使用 eval 来完成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