gpt4 book ai didi

javascript - 我的代码播放器上的 CSS 部分不工作

转载 作者:太空宇宙 更新时间:2023-11-04 10:48:55 24 4
gpt4 key购买 nike

以下代码播放器的每个部分都可以正常工作,除了它的 CSS 部分。它可以毫无问题地显示 HTML 和 JS。我试图修复它,但我做不到。甚至 Chrome 控制台也没有指向任何错误。我认为问题出在这里:

  $("#runButton").click(function() {
$('#resultFrame').contents().find('html').html("<style>"+$
('#css').val()+"</style>"+$("#html").val());

document.getElementById('resultFrame').contentWindow.eval( $
('#js').val() );
});

这里是所有的代码:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Sadegh's code player</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />

<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>

<style type="text/css">

*{
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
font-weight: 300;
}

#menubar {
width: 100%;
height: 40px;
background-color: #6C4141;
}

#logo {
padding: 10px 0 0 15px;
font-weight: bold;
font-size: 1.15em;
float: left;
color: white;
text-shadow: 1px 1px 3px gray;
}

#button {
float: right;
padding: 5px 20px 0 0;
}

#runButton {
font-size: 1.15em;
font-weight: bold;
height: 30px;
width: 60px;
border-radius: 4px;
color: #875D5D;
border: 1px solid #8E7272;
background-color: white;
text-shadow: 1px 1px black;
}
#runButton:hover {
background-color: #8E7272;
color: white;
border: 1px solid white;
}

#toggles {
width: 400px;
margin: 0px auto;
height: 100%;
}

#toggles ul {
list-style-type: none;
}

.toggleLi {
display: inline-block;
padding: 7px 5px 5px 5px;
border: 1px solid white;
border-radius: 5px 5px 0 0;
background-color: #8E7272;
height:30px;
margin-top: 10px;
width: 95px;
text-align: center;
border-bottom: 0;
color: white;
font-weight: bold;
}

.selected {
background-color: white;
color: #875D5D;
border: 1px solid gray;
}

.clear {
clear: both;
}

.codeContainer {
width: 25%;
float:left;
height: 100%;
position: relative;
}

.codeContainer textarea {
width: 100%;
height: 100%;
border: none;
border-right: 1px ridge #875D5D;
padding: 15px;
font-family: Console, Lucida, monospace;
font-size: 18px;
}

.codeLable {
position: absolute; top: 10px; right: 10px;
border-bottom: 1px solid #875D5D;
padding: 0 2px 2px 2px;
}

#resultFrame {
width: 100%;
height: 100%;
border: none;
}

</style>
</head>
<body>
<div id="wrapper">
<div id="menubar">

<div id="logo">Code Player</div>

<div id="button">
<button type="button" id="runButton">Run</button>
</div>

<div id="toggles">
<ul>
<li class="toggleLi selected">HTML</li>
<li class="toggleLi selected">CSS</li>
<li class="toggleLi selected">JS</li>
<li class="toggleLi selected">Result</li>
</ul>
</div>

<div class="clear"></div>

<!-- html container -->
<div class="codeContainer" id="HTMLContainer">
<div class="codeLable">HTML</div>
<textarea name="textarea" id="html">Some text</textarea>
</div>

<!-- css container -->
<div class="codeContainer" id="CSSContainer">
<div class="codeLable">CSS</div>
<textarea name="textarea" id="css">body {
background-color: red;
}
</textarea>
</div>

<!-- javascript container -->
<div class="codeContainer" id="JSContainer">
<div class="codeLable">JavaScript</div>
<textarea name="textarea" id="js">alert('Thatsit')</textarea>
</div>

<!-- result iframe -->
<div class="codeContainer" id="ResultContainer">
<div class="codeLable">Result</div>
<iframe id="resultFrame"></iframe>
</div>


</div><!-- end of #menubar -->
</div><!-- end of page wrapper -->
<script type="text/javascript">

var windowHeight = $(window).height();

var menubarHeight = $("#menubar").height();

var codeContainerHeight = windowHeight - menubarHeight;

$(".codeContainer").height(codeContainerHeight + "px");

$(".toggleLi").click(function(){

$(this).toggleClass("selected");

var activeDiv = $(this).html();

$("#"+activeDiv+"Container").toggle();

var showingDivs = $(".codeContainer").filter(function() {

return $(this).css("display") !== "none";

}).length;

var width = 100 / showingDivs;

$(".codeContainer").css("width",width + "%");

});

$("#runButton").click(function() {
$('#resultFrame').contents().find('html').html("<style>"+$
('#css').val()+"</style>"+$("#html").val());

document.getElementById('resultFrame').contentWindow.eval( $
('#js').val() );
});

</script>
</body>
</html>

最佳答案

 $('#resultFrame').contents().find('html').html("<style>"+$
('#css').val()+"</style>"+$("#html").val());

$("#html").val()将只返回不包含标签的文本,因此当用户在 <textarea name="textarea" id="html">Some text</textarea> 中输入内容时你需要包装成一个标签,例如:user input(Some text),wrap to <p>Some text</p>或包裹在 body 标签内。希望这对您有帮助。

关于javascript - 我的代码播放器上的 CSS 部分不工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35143623/

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