将回调函数作为html数据属性传递

Pass a callback function as a html data attribute

本文关键字：数据属性 html 回调 函数      更新时间：2023-09-26

我已经创建了一个像这样的DOM结构

<div data-execute="someFunction.abc" id="someId">
  </div>

我能够在js中检索属性，但我打算将其作为回调函数执行。所以我要这样做

var x = document.getElementById("someId").getAttribute('data-execute');

如预期的那样，返回someFunction。但是在consolingtypeof (x)上显示的是"字符串"。请参考这张小提琴

var someFunction = function() {
  alert("Hello")
}
var load = (function(module, global) {
  var x = document.getElementById("someId").getAttribute('data-execute');
  console.log(typeof(x))
}(load || {}, this))
<div data-execute="someFunction.abc" id="someId">
  Some Function
</div>

我也检查了这个链接通过内联数据传递Javascript函数- attributes

但是我无法将其作为回调函数执行。

试试这个:

<div data-execute="someFunction.abc" id="someId"></div>
var x = document.getElementById("someId").getAttribute('data-execute');
window[x].call();

您可以在全局作用域中定义的函数中使用call方法，您可以在全局窗口对象中访问它。

裁判:

call()方法使用给定的this值和调用函数单独提供的参数

我假定点之后的代码是传递给函数的参数。

代码:

var someFunction = function (p) {
    alert(p)
}
var load = (function (module, global) {
    var x = document.getElementById("someId").getAttribute('data-execute');
    window[x.split('.')[0]].call(undefined, x.split('.')[1]);
}(load || {}, this))

演示:https://jsfiddle.net/IrvinDominin/5bjsmu3x/

我也遇到了同样的问题，我找到了这个解决方案:

HTML: 

<element data-call="return alert('callback');">

JS: 

Function(YourElement.getAttribute('data-callback'))();

您可以将其存储在一个变量中并添加参数:

HTML: 

<element data-call="return str.toUpperCase();">

JS: 

var fn = Function("str", YourElement.getAttribute('data-callback'));
var returned = fn("Test String");
相关文章：