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

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

转载作者：太空宇宙更新时间：2023-11-04 10:48:55

以下代码播放器的每个部分都可以正常工作，除了它的 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/

文章推荐： java - Google 分析事件显示在实时 View 中，但未存档

文章推荐： linux - 无法从 ubuntu 完全卸载 Postgres

文章推荐： java - akka 真的能解决死锁吗？

文章推荐： java - 在 JavaFX 中使用 Map 和 TableView

typescript - A 部分部分 io-ts
我在使用 io-ts 时遇到一些问题。我发现它确实缺乏文档，我取得的大部分进展都是通过 GitHub issues 取得的。不，我不明白 HKT，所以没有帮助。基本上，我在其他地方创建一个类型，ty
java - 匹配完整文件正则表达式中的 A 部分，但不匹配 B 部分
我必须创建一个正则表达式来搜索整个文件，以找到与 Java XML 解析器的第一部分(但不是第二部分)的匹配项。这将用于防止某些 XXE 攻击。不幸的是，它确实必须是单个正则表达式，并且它确实需要搜索
c# - 部分/部分中的 asp.net mvs 部分？
我有一些简单的 Shared/_Header.cshtml 文件中的内容。 My Shared/_Layout.cshtml 通过调用插入该代码 @Html.Partial("_Header") 目前
java - Selenium 只执行循环的 if != null 部分，不运行循环的 "else if null "部分
我有一个 if-else 语句，其中: 条件 1:ID 匹配并且自动填充某些字段。然后 if 语句只填充其余字段条件 2:ID 不匹配，所有字段均为空白。 ELSE 语句将它们全部填充当我使条件
javascript - 无法在 JSFIDDLE 中使用滚动魔法(第 1 部分，共 2 部分)
我正在开发一个单页滚动网站。我正在尝试实现 ScrollMagic 并固定第一部分，以便网站的其余部分滚动到固定部分的顶部。我尝试创建一个 jsfiddle 来显示问题，但我似乎无法让 jsfiddl
javascript - 既然有

首页

博学

6Ren·AI

商城

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