Question

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

我有三个textareas：

对于HTML，

1 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>

Answer 1

设置iframe后，您可以访问iframe中的window和document个对象。您可以访问document.getElementById和朋友等方法。

要重新加载CSS，建议您在iframe中创建<style>元素。当CSS更改时，擦除该元素的内容并放入新的CSS。 HTML也可以这样做，消除<body>的HTML并将其替换为新的HTML。 innerHTML将成为你的朋友。 JS会有点棘手。您需要从头开始重新创建iframe才能重新开始。

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

1 个答案: