javascript - 在 javascript 中 eval 的替代用法

标签 javascript function onclick eval

我听说在 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。还有其他解决办法吗?

最佳答案

只需编写非常接近的代码,无需 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

关于javascript - 在 javascript 中 eval 的替代用法,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13998403/

相关文章:

html - 低 z-index 元素的 onclick 用法

javascript - 使用 JavaScript 更改纸质按钮的文本( polymer 1.0)

javascript - 使用 jQuery 根据屏幕大小更改某些功能

javascript - 如何通过 Javascript 在按键上更改输入 [type=number] 的值?

performance - 使用可重用代码编写过程的推荐做法是什么?

javascript - 在附加的 js 文件中重新分配 javascript 函数

c++ - 排序函数 C++

javascript - 由于最小高度,标题图片不正确,我们可以通过 jquery 左右修复它吗

javascript - 第一次点击在网站上使用 jquery 弹出页脚?

javascript - 从 html 元素中添加或删除类如何影响附加到这些元素的 onclick 和其他类似功能?