Question

我做了一个脚本，帮助我实时制作一个网页，我可以把html和css，一切都运行良好，但我不能执行javascript，因为我使用的是基于字符串的编辑器，你能帮助我吗？找到一种在这个编辑器中执行javascript的方法？

请注意，使用这个简单的脚本，您可以使用CSS和HTML放置整个页面的代码而无需转义，您将看到格式化页面，但JAVASCRIPT在此脚本中不起作用。

function html() {
var str = document.getElementById("go").value;
  document.getElementById("show").innerHTML = str;   
}

<p id="show"></p>
<textarea id="go" onKeyUp="html()"  width="100%" cols="50" rows="10">
   </textarea>

UPDATE，最后，我得到了，这个编辑器也执行了javascript！现在我可以用javascript构建整个页面，谢谢你的答案!!!

$(document).ready(function(){
  $('#editor').keyup(function(){
      $('#page').html($(this).val());
  });
   });

<p id="page"></p>
 <textarea id="editor"  width="100%" cols="50" rows="10" placeholder="you can use html, css and javascript here..."></textarea>
 <script src="http://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

Answer 1

您要在段落标记中添加所有内容。这就是脚本标签中没有任何工作原因的原因。您可能希望在body标签中附加所有内容：

function html() {
  var str = document.getElementById("go").value;
  document.getElementsByTagName("body")[0].innerHTML = str;   
}

你能澄清你的意思吗？找到一种在这个编辑器中执行javascript的方法吗？＆＃34;你有什么期望的结果？

Answer 2

Javascript不会像这样自动运行，你需要使用eval（）来运行它，我建议像这样：

虽然它增加了安全风险，但它是唯一的方法之一。

＆＃13;

function html1() {
var str1 = document.getElementById("go1").value;
  document.getElementById("show1").innerHTML = str1;   
}

function html2() {
var str2 = document.getElementById("go2").value;
  document.getElementById("show2").innerHTML = eval(str2);   
}

＆＃13;

<p id="show1"></p>
<p id="show2"></p>
<textarea id="go1" onKeyUp="html1()"  width="100%" cols="50" rows="10"> </textarea>
<textarea id="go2" width="100%" cols="50" rows="10"> </textarea>
<br><button onclick="html2()">Try it</button>

＆＃13;

编辑实时执行JAVASCRIPT的HTML和CSS

2 个答案: