Question

我正在尝试制作一个处理按钮的按钮“东西”。单击按钮时，我需要有一种方法来调用用户定义的函数。以下是将被选为按钮的元素示例：

<section class = 'button' buttonaction = 'aFunction()'></section>

因此，当单击该按钮时，我希望它获取aFunction()值并使用它来调用该函数。

示例：

elem.onclick = function(){
    action = this.getAttribute('buttonaction');
    action();
}

我知道这个例子是错的，但我认为它传达了我想做的事情。谢谢， - 迈克尔米切尔

Answer 1

你可以设置这样的功能：

var my_allowed_functions = {
    func1: function(arg1, arg) {
        alert(arg1 + arg2);
    },
    func2: function(arg1, arg) {
        alert(arg1 + arg2);
    }
};

只需按姓名呼叫其中一个：

my_allowed_functions['func1'].apply(this, argument_array);

Answer 2

HTML：

<section class = 'button' buttonaction='aFunction'></section>

脚本：

var aFunction = function(){};

var buttons = document.querySelectorAll(".button");

[].forEach.call(buttons,function(button){
 button.onclick = function(event){
  var ct = event.currentTarget;
  var func = ct.getAttribute("buttonaction");
  window[func]()

 }
}

然而，当你执行window[func]()时，你仍然在做一个范围的评估。

所以为什么不这样做：

<section class='button' onclick='aFunction()'></section>

Answer 3

如果不运行任意代码，就无法运行任意代码。您对eval的关注是安全风险，但是，如果您使用名为ponies的其他函数以某种方式运行用户输入的代码，那么它仍将是危险的。

您的要求需要eval，因此您应该使用，或重新考虑您的要求。

Answer 4

这是另一种方法，window：

<script type="text/javascript"><!--
//Create the function
var fn = function(){
  alert('ok');
};

//Call the function
var str = 'fn';
window[str]();
//-->
</script>

从用户调用函数输入变量[no eval（）]

4 个答案: