[英]CSS section on my code player is not working
以下代碼播放器的每個部分都能正常工作，期望其中的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>您需要將其換行標簽，例如：用戶輸入（某些文本），換成<p>Some text</p>或包裹在body標簽內。希望這對您有所幫助。
我將如何在小部分中暫停我的代碼，而我的if和else語句不起作用
[英]How would i halt my code in the little section and my if and else statements arent working
我的javascript觸發器在我的代碼中沒有使用css媒體查詢
[英]My javascript trigger is not working in my code with css media query
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.