Javascript 如何在iframe中输出codemirror的结果，如“on”；keyup“；
我正在尝试制作一个类似于jsbin.com的代码播放器。我偶然发现CodeMirror是一个选项，但我似乎无法将iframe输出链接到HTML输入（更不用说CSS或Javascript输入了）。我所能做的最接近的一件事是，根据对另一个用户问题的回答，通过点击按钮来管理：Javascript 如何在iframe中输出codemirror的结果，如“on”；keyup“；,javascript,jquery,iframe,codemirror,Javascript,Jquery,Iframe,Codemirror,我正在尝试制作一个类似于jsbin.com的代码播放器。我偶然发现CodeMirror是一个选项，但我似乎无法将iframe输出链接到HTML输入（更不用说CSS或Javascript输入了）。我所能做的最接近的一件事是，根据对另一个用户问题的回答，通过点击按钮来管理： "$("button").click(function(){ $("iframe").contents().find("body&
"$("button").click(function(){
$("iframe").contents().find("body").html(editor.getValue());
})"
$("#editor123").on("change keyup paste", function() {
$("iframe").contents().find("html").html($("#editor123").val())
});
<html>
<head>
<title>jQuery CodePlayer Project</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<link href="jquery-ui-main-folder/jquery-ui/jquery-ui.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="jquery-ui-main-folder/jquery-ui/jquery-ui.js"></script>
<link rel="stylesheet" href="codemirror/lib/codemirror.css">
<link href="codemirror/theme/dracula.css" rel="stylesheet"/>
<script src="codemirror/lib/codemirror.js"></script>
<script src="codemirror/mode/xml/xml.js"></script>
<script src="codemirror/addon/edit/closetag.js"></script>
<style>
iframe {
height: 100%;
width: 100%;
}
p {
color: white;
background-color: #282A36;
height: 30px;
margin: 0;
padding: 5px;
border-bottom: 1px solid white;
}
textarea {
height: 100%;
}
#mainGridArea {
display: grid;
width: 100%;
height: 100%;
grid-template-columns: repeat(4, 1fr);
}
#htmlSection {
grid-template-start: 1
grid-template-end: 2
}
#cssSection {
grid-template-start: 2
grid-template-end: 3
}
#jsSection {
grid-template-start: 3
grid-template-end: 4
}
#outputSection {
grid-template-start: 4
grid-template-end: 5
}
#nav-bar {
display: grid;
width: 100%
height: 15px;
grid-template-columns: 40% 1fr 1fr 1fr 1fr 40%;
border-bottom: 1px solid grey;
grid-auto-rows: 35px;
}
#pageTitle {
margin-bottom: 0;
margin-top: 0;
}
.topButton {
width: 100%;
height: 100%;
font-size: 16px;
font-weight: bold;
}
.borderSection {
border: 0.2px solid grey;
}
#editor {
width: 100%;
height: 100%;
}
.CodeMirror {
height:100%;
}
</style>
</head>
<body>
<div id="nav-bar">
<div id="pageTitleGrid">
<h1 id="pageTitle">CodePlayer</h1>
</div>
<div id="htmlBtn">
<button class="topButton">HTML</button>
</div>
<div id="cssBtn">
<button class="topButton">CSS</button>
</div>
<div id="jsBtn">
<button class="topButton">JavaScript</button>
</div>
<div id="outputBtn">
<button class="topButton">Output</button>
</div>
</div>
<main>
<div id="mainGridArea">
<div id="htmlSection" class="borderSection">
<p>HTML</p>
<textarea id="editor123"></textarea>
</div>
<div id="cssSection" class="borderSection">
<p>CSS</p>
<textarea id="editor2"></textarea>
</div>
<div id="jsSection" class="borderSection">
<p>JavaScript</p>
<textarea id="editor3"></textarea>
</div>
<div id="outputSection" class="borderSection">
<iframe class="outputFrame" src=""></iframe>
</div>
</div>
</main>
</body>
<script type="text/javascript">
document.getElementById("editor123").onchange=function myFunction() {
console.log("it twerked");
$("iframe").contents().find("html").html(editor.getValue())
};
var editor1 = CodeMirror.fromTextArea(document.getElementById("editor123"), {
mode: "xml",
theme: "dracula",
lineNumbers: true,
autoCloseTags: true,
});
var editor2 = CodeMirror.fromTextArea(document.getElementById("editor2"), {
mode: "xml",
theme: "dracula",
lineNumbers: true,
autoCloseTags: true,
});
var editor3 = CodeMirror.fromTextArea(document.getElementById("editor3"), {
mode: "xml",
theme: "dracula",
lineNumbers: true,
autoCloseTags: true,
});
$(document).ready(function(){
$("#htmlBtn").click(function(){
$("#htmlSection").toggle();
});
});
$(document).ready(function(){
$("#cssBtn").click(function(){
$("#cssSection").toggle();
});
});
$(document).ready(function(){
$("#jsBtn").click(function(){
$("#jsSection").toggle();
});
});
$(document).ready(function(){
$("#outputBtn").click(function(){
$("#outputSection").toggle();
});
});
$('#editor123').bind('input change', function() {
console.log("it twerked");
$("iframe").contents().find("html").html(editor.getValue())
});
</script>
</html>
jQuery代码播放器项目
iframe{
身高：100%；
宽度：100%；
}
p{
颜色：白色；
背景色：#282A36；
高度：30px；
保证金：0；
填充物：5px；
边框底部：1px纯白；
}
文本区{
身高：100%；
}
#主网格区{
显示：网格；
宽度：100%；
身高：100%；
网格模板列：重复（4，1fr）；
}
#htmlSection{
网格模板开始：1
网格模板结束：2
}
#CSSECTION{
网格模板开始：2
网格模板结束：3
}
#jsSection{
网格模板开始：3
网格模板结束：4
}
#输出段{
网格模板开始：4
网格模板结束：5
}
#导航条{
显示：网格；
宽度：100%
高度：15px；
网格模板柱：40%1fr 1fr 40%；
边框底部：1px纯色灰色；
网格自动行：35px；
}
#页面标题{
页边距底部：0；
边际上限：0；
}
.顶部按钮{
宽度：100%；
身高：100%；
字体大小：16px；
字体大小：粗体；
}
.边境科{
边框：0.2倍纯色灰色；
}
#编辑{
宽度：100%；
身高：100%；
}
.CodeMirror{
身高：100%；
}
代码播放器
HTML
CSS
JavaScript
输出
HTML
CSS
JavaScript
document.getElementById（“editor123”）.onchange=函数myFunction（）{
console.log（“it twerked”）；
$（“iframe”）.contents（）.find（“html”）.html（editor.getValue（））
};
var editor1=CodeMirror.fromTextArea（document.getElementById（“editor123”）{
模式：“xml”，
主题：“德古拉”，
行号：对，
自动关闭标签：正确，
});
var editor2=CodeMirror.fromTextArea（document.getElementById（“editor2”）{
模式：“xml”，
主题：“德古拉”，
行号：对，
自动关闭标签：正确，
});
var editor3=CodeMirror.fromTextArea（document.getElementById（“editor3”）{
模式：“xml”，
主题：“德古拉”，
行号：对，
自动关闭标签：正确，
});
$（文档）.ready（函数（）{
$（“#htmlBtn”）。单击（函数（）{
$（“#htmlSection”）.toggle（）；
});
});
$（文档）.ready（函数（）{
$（“#cssBtn”）。单击（函数（）{
$（“#cssSection”）.toggle（）；
});
});
$（文档）.ready（函数（）{
$（“#jsBtn”）。单击（函数（）{
$（“#jsSection”）.toggle（）；
});
});
$（文档）.ready（函数（）{
$（“#outputBtn”）。单击（函数（）{
$（“#outputSection”）.toggle（）；
});
});
$（'#editor123'）.bind（'input change'，function（）{
console.log（“it twerked”）；
$（“iframe”）.contents（）.find（“html”）.html（editor.getValue（））
});