在不重新加载HTML或Javascript的情况下动态添加代码到IFrame

Question

编织：http://kodeweave.sourceforge.net/editor/#5dbb5ce4a85bcaf4c5805e337c829e73

我有三个textareas：

1代表html 1用于CSS 和1代码用于javascript代码

每当在这些textareas中添加代码时（我使用的是与此帖相同的密钥），我调用一个名为runEditor的函数，它将代码添加到iframe中。

我想弄清楚的是，在添加CSS时如何在不添加HTML或JavaScript的情况下调用相同的函数？

var htmlEditor = document.querySelector(".html")
var cssEditor  = document.querySelector(".css")
var jsEditor   = document.querySelector(".js")

function runEditor() {
  var previewFrame = document.querySelector(".preview")
  var preview =  previewFrame.contentDocument ||  previewFrame.contentWindow.document

  preview.open()
  preview.write("<style>"+ cssEditor.value +"</style>" + htmlEditor.value + "<scr"+"ipt>"+ jsEditor.value +"</scr"+"ipt>")
  preview.close()
}
runEditor()

htmlEditor.onkeyup = function() {
  runEditor()
}
cssEditor.onkeyup = function() {
  runEditor()
}
jsEditor.onkeyup = function() {
  runEditor()
}

textarea {
  width: 30%;
  height: 100px;
}

.preview {
  width: 100%;
}

<textarea class="html">
<button>
  Hello world
</button>

<div class="output"></div>
</textarea>
<textarea class="css">body {
  background: #52b165;
}</textarea>
<textarea class="js">
var output  = document.querySelector(".output")
var btn     = document.querySelector("button")
var counter = 0

function addElm() {
  var node = document.createElement("div")
  var txt = document.createTextNode("hi " + counter++)
  node.appendChild(txt)
  output.appendChild(node)
}

btn.addEventListener("click", function() {
  addElm()
})
</textarea>
<iframe class="preview" sandbox="allow-forms allow-pointer-lock allow-popups allow-same-origin allow-scripts"></iframe>