Question

我听说在JavaScript中使用eval函数是个坏主意，但我有这个代码：

// this string (function)  is generated dynamically...
var funVal = 'alert("a")' ;        
//.....

var Button1 = document.getElementById("BtnSave");
// onclick event of button
eval("Button1.onclick = function () { " + funVal + " };");

我不想使用eval。还有其他解决方案吗？

Answer 1

只需编写几乎没有eval的代码，没有什么需要它：

var funVal = function() {
    alert("a");
};

var Button1 = document.getElementById("BtnSave");
Button1.onclick = funVal;

在评论中，您已经说过代码是动态生成的服务器端。这根本不是问题，只需让服务器输出需要JavaScript代码的代码（在<script>...</script>标签内，或者作为通过<script src="..."></script>加载的响应的完整内容）。在任何一种情况下，关键是要确保您发送到浏览器的内容是有效的代码。

示例1 ：动态生成内联script标记（您还没有说过服务器端技术是什么，所以我选择了相当常见的PHP）：

<!doctype html> <html> <head> <meta charset="UTF-8"> <title>Inline Dynamically Generated Script</title> </head> <body> <p>Each time you load this page, the script in the inline <code>script</code> tag at the end is different.</p> <button id="theButton">Click Me</button> <script> document.getElementById("theButton").onclick = function() { alert("<?php echo("Hi there, this page's magic number is " . rand(0, 10000)); ?>"); }; </script> </body> </html>

Live Example

示例2 ：在单独的文件中动态生成脚本：

HTML：

<!doctype html> <html> <head> <meta charset="UTF-8"> <title>Dynamically Generated Script from File</title> </head> <body> <p>Each time you load this page, the script in the file loaded by the <code>script</code> tag at the end is different.</p> <button id="theButton">Click Me</button> <script src="dynamic-script.php"></script> </body> </html>

JavaScript文件（dynamic-script.php）：

<?php header('Content-type: application/javascript'); ?> document.getElementById("theButton").onclick = function() { alert("<?php echo("Hi there, this page's magic number is " . rand(0, 10000)); ?>"); };

Live Example

Answer 2

我不知道你为什么要这样做，但更好的方法是使用Function构造函数：

new Function("Button1.onclick = function () { " + funVal + " };")();

但您不必使用此解决方案或eval解决方案。这样做在输出中完全相同：

Button1.onclick = function() { alert('a'); };

Answer 3

Javascript允许您处理变量等函数。您可以将它们分配给其他变量，您可以将它们作为参数传递给其他函数，甚至可以使用返回其他函数的函数。这可以在大多数使用 ~~evil（）~~ eval（）的情况下使用。

在javascript中使用eval的替代方法

3 个答案: