Iframe 是 srcdoc 在使用变量时不更新

Question

变量对我的 iframe 的 srcdoc 不起作用，或者您不能使用 div.value 或 something.When 我对 iframe 的 srcdoc 使用变量，而 iframe 的 html(srcdoc) 不起作用'更新。这段代码来自我试图制作一个代码编辑器。请帮助，我可以使用 jQuery。还没有完成

const html = document.getElementById("html");
const css = document.getElementById("css");
const js = document.getElementById("js");
var edH = document.getElementById("edH");
var edC = document.getElementById("edC");
var edJ = document.getElementById("edJ");
var ifr = document.getElementById("res");
var cssCode;
var htmlCode;
var jsCode;

html.addEventListener("click", changeHTML);
css.addEventListener("click", changeCss);
js.addEventListener("click", changeJs);
html.addEventListener("keydown", update);
function changeHTML() {
  htmlCode = edH.value;
  jsCode = edJ.value;
  cssCode = edC.value;
  edH.value = htmlCode;
  edH.style.display = "block";
  edC.style.display = "none";
  edJ.style.display = "none";
}

function changeCss() {
  htmlCode = edH.value;
  jsCode = edJ.value;
  cssCode = edC.value;
  edC.value = cssCode;
  edC.style.display = "block";
  edH.style.display = "none";
  edJ.style.display = "none";
}

function changeJs() {
  htmlCode = edH.value;
  jsCode = edJ.value;
  cssCode = edC.value;
  edJ.style.display = "block";
  edC.style.display = "none";
  edH.style.display = "none";
}

function update() {
  ifr.srcdoc = edH.value;
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Static Template</title>
  </head>
  <body>
    <div id="tab" class="tabs">
      <p class="langs" id="lang">
        <span id="html">HTML</span> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <span id="css">CSS</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <span id="js">Javascript</span>
      </p>
    </div>
    <div id="edH" class="edH" contenteditable="true"></div>
    <div id="edC" class="edC" contenteditable="true"></div>
    <div id="edJ" class="edJ" contenteditable="true"></div>
    <iframe id="res" width="500px" height="200px"></iframe>
  </body>
  <script src="main.js"></script>
</html>

iframe 的 srcdoc 不会更新为 edH.value。
演示：https://codesandbox.io/s/lucid-haze-m95ht3
谢谢

Answer 1

您正在向跨度添加一个按键事件侦听器；没有地方可以输入跨度。

Iframe 是 srcdoc 在使用变量时不更新

Iframe is srcdoc not updating when using variable

html

javascript

iframe