gpt4 book ai didi

javascript - 动态添加代码到 IFrame,无需重新加载 HTML 或 Javascript

转载 作者:行者123 更新时间:2023-12-03 07:15:45 25 4
gpt4 key购买 nike

编织: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 后,您可以访问 windowdocument 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/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com