编织:http://kodeweave.sourceforge.net/editor/#5dbb5ce4a85bcaf4c5805e337c829e73
我有三个文本区域:
1 表示 HTML
1 用于 CSS
1 表示 JavaScript 代码
每当在这些文本区域中添加代码时(我在这篇文章中使用的是 keyup)，我都会调用一个名为 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>最佳答案
设置 iframe 后，您可以访问 window和document iframe 内的对象。您可以访问类似 document.getElementById 的方法和 friend 们。
要重新加载CSS，建议您创建一个<style> iframe 中的元素。当 CSS 更改时，清除该元素的内容并放入新的 CSS。 HTML 也可以做同样的事情，删除 <body> 的 HTML并将其替换为新的 HTML。 innerHTML将成为你的 friend 。 JS 会有点棘手。您需要从头开始重新创建 iframe。
关于javascript - 动态添加代码到 IFrame，无需重新加载 HTML 或 Javascript，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36436189/