Question

以下代码播放器的每个部分都可以正常工作，期望它的CSS部分。它可以毫无问题地显示HTML和JS。我试图解决它，但我无法解决。甚至Chrome控制台也没有指出任何错误。我认为问题在于：

＆＃13;

  $("#runButton").click(function() {
    $('#resultFrame').contents().find('html').html("<style>"+$
('#css').val()+"</style>"+$("#html").val());

  document.getElementById('resultFrame').contentWindow.eval( $
  ('#js').val() );
  });

＆＃13;

以下是所有代码：

＆＃13;

<!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>

＆＃13;

Answer 1

 $('#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标签。希望这对你有帮助。

我的代码播放器上的CSS部分无效

1 个答案: