执行HTML5数据字符串作为JavaScript（没有eval）？

Question

I have the following div:

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

I want to be able to execute the div's callback string as a JavaScipt function like this:

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

But this obviously won't work. Is there any way to do this?

Here's a JSFiddle .

Answer 1

I suggest not storing code as a data- attribute. Make a function, then just store the function name as the attribute.

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

Then you can do window[$('#foo').data('callback')]() .

EDIT: If you don't want to do this, you can also make use of the onclick event (or any (built-in) event for that matter).

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

Then you can use .prop to get the event (as a function), and then use it.

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

Answer 2

One, potentially crazy :), solution would be to use js.js . This would be more secure than eval .

Answer 3

If you can alter the html to

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

then you can do

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

---

But why do you need to do it that way ?

Answer 4

What you have can be done using eval , but eval is evil .

Edit:

And some modifiction is required to your HTML,

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

JS

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

DEMO

Answer 5

You could always use the Function constructor, however, you will need a string containing only your statements. You can either parse your existing string or even better, if you can modify the value of that data attribute at the source. Then you would do

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

Updated JSFiddle