调用自定义数据属性中的函数

Call a function inside a custom data-attr?

本文关键字：函数 数据属性 自定义 调用      更新时间：2023-09-26

给定我们正在使用的当前CMS，我需要在自定义数据属性中调用函数。是否可以将数据属性的内容作为函数调用以如下所示运行？简单的例子：

设置

 <button data-function="alert('hello world')">Run Function</button>

跑

$('button').attr('function');

我相信以上只是获取内容，而不是在编写时实际执行任何内容。

这可能吗？

您可以从 data 属性创建一个Function：

// create
var funcStr = $('button').data('function');
var f = new Function(funcStr);
// invoke
f();

参见 MDN

如果函数已知，这是另一种方法。

     $(document).ready(function() {
       $('button').click(function() {
         var functionObject = JSON.parse($('button').attr('data-function'));
         window[functionObject.name].apply(window, functionObject.arguments);
       });
     });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<button data-function='{"name": "alert", "arguments" : ["hello world"]}'>Run Function</button>

它从 data-function 属性解析 JSON 字符串。使用 window 对象调用 name 提供的函数（消除 eval ），并使用 apply 将参数（在数组内）传递给函数。

如果要执行代码，则必须调用eval 。您还需要使用该属性的全名，或使用 .data() 。

eval($('button').attr('data-function'));

或

eval($('button').data('function');

您可以随时使用 eval 函数。

eval($('button').attr('data-function'));
相关文章：