CodeMirror，在 keyup 上更新 iframe 脚本答案

【问题标题】：CodeMirror, updating iframe script on keyupCodeMirror，在 keyup 上更新 iframe 脚本
【发布时间】：2019-08-08 19:44:47
【问题描述】：

我有一个带有 codemirror 编辑器和 iframe 的小部件，我正在附加一个带有预定义内容的脚本标签。

我正在尝试更新 keyup 上的脚本标签内容，它正在工作，但它实际上并没有“更新”javascript。

解释：预定义代码有一个点击事件，将sample-div 背景颜色更改为蓝色，如果我编辑代码以将color 更改为蓝色，当我点击sample-div 它会将背景和颜色都更改为蓝色。

这很奇怪，因为 iframe 脚本标签正在获取正确的“文本”。

由于某种原因无法在 sn-p 中工作，所以这里是小提琴https://jsfiddle.net/hannacreed/tkp5c017/3/

【问题讨论】：

标签： jquery iframe editor codemirror

【解决方案1】：

javascript“代码”正在更新，但您忽略了示例代码绑定到文档的已委托事件。

文档上的任何后续委托事件都将简单地“附加”到已经绑定的事件。这就是为什么尽管可见的“代码”发生了变化，但您仍然看到以前的处理程序触发了。

每次您想要更新代码时，只需“重新加载”iframe。通过重新加载，我的意思是重新创建 iframe 元素。当然，这在 keyup 上可能会很昂贵，因此您可能还想考虑限制您的重新加载。

请参阅this forked fiddle 以获取工作版本。

基本上，您需要一个生成 iframe 内容的函数...

function getFrameContents() {
  return `<!doctype html>
<html>
<head>
    <style>body { background: #fff; } .sample-div { background: #333; padding: 10px; width: fit-content; height: fit-content; border-radius: 10px; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);</style>
    <script>window.$ = parent.$;<\/script>
    <script>${editor.getValue().toString()}<\/script>
</head>
<body>
  <div class="wrapper">
      <div class="sample-div"><label>here is some text.</label></div>
  </div>
</body>
</html>`;
}

您还需要一个函数来创建新的iframe 来代替旧的 iframe，它将文档替换为生成的内容（根据调用上述函数）。

function reloadFrame () {
  var iframe = widget.find('iframe').replaceWith(document.createElement('iframe'));
  iframe = widget.find('iframe');
  var doc = iframe.contents()[0];
  var contents = getFrameContents();
  doc.open();
  doc.writeln(contents);
  doc.close();
}

最后，在负载和keyup 上调用reloadFrame（考虑限制）。

// load initial frame
reloadFrame();

// trigger reload on keyup
$(document).on('keyup', '.CodeMirror', function () {
    reloadFrame();
});

【讨论】：