javascript - 从用户输入的变量调用函数 [no eval()]

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

这是另一种方法，使用window：

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

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

Answer 4

不运行任意代码就无法运行任意代码。您担心的eval是安全风险，但是，如果您使用名为ponies以某种方式运行用户输入的代码的不同函数，它仍然会很危险。

您的需求需求eval，所以这就是您应该使用的，或者重新考虑您的需求。