執行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是邪惡的 。

編輯：

而且您的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