Javascript命令插入HTML

Javascript command insertion HTML

本文关键字：HTML 插入 命令 Javascript      更新时间：2023-09-26

我想创建一个JavaScript命令执行。。我的意思是，如果我用输入法构建了一个页面，那么，该输入法的值将在JavaScript控制台中执行，那么，执行的结果应该插入HTML标记中，如下所示：HTML:

<input id="commandInsertion"/>
<input type="Submit" onclick="doCommand()">
<p id="result"></p>

JavaScript:

var doCommand = function(x) {
   // The command should be something like this
   Execute(x); // Imaginary Function
   document.getElementById('result').innerHTML = ResultOf(x);
   // ResultOf() is also an imaginary function
};

doCommand是一个执行命令，然后将其打印到文档中的函数

简单。听说过eval吗？这是一个既有趣又危险的功能。它允许您在运行时评估代码。这里有一个例子：

$('#calc').on('input', function() {
  try {
    $('#out').val(eval($('#calc').val()));
  } catch (e) {
    $('#out').val('ERROR!')
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
Input:
<br>
<input id='calc'>
<br>Output:
<br>
<input id='out'>

这很简单，但eval也可能很危险。它可以让攻击者做任何你能做的事。你可能想了解一下：

将eval（）限制为窄范围

这是你想要的代码：

var doCommand = function() {
  // The command should be something like this
  document.getElementById('output').innerHTML = eval(document.getElementById('commandInsertion').value);
};
<input id="commandInsertion" />
<div id="output"></div>
<br>
<br>
<input type="Submit" onclick="doCommand()">

我从你的解释中得到的是，你需要一些东西，比如：

function getInsertedValue() {
  var txt = document.getElementById('commandInsertion').value;
  updateElem(txt);
}
function updateElem(insertedTxt) {
  document.getElementById("updatedTxt").innerHTML = eval(insertedTxt);
}
<div>
  <input type="text" id="commandInsertion" />
  <span id="updatedTxt"></span>
  <input type="Submit" onclick="getInsertedValue()">
</div>

你不是说eval函数吗？

eval（）函数计算或执行一个参数。

非常小心地使用它——它允许用户运行任何javascript命令，这是一个很大的安全风险。

相关文章：