Как создать JavaScript "Попробуйте сами"

Я знаю, что есть несколько редакторов JavaScript "Попробуйте сами", таких как W3School Try It editor, JSBin и JSFiddle.

Я разрабатываю графическую библиотеку JavaScript, которую я хотел бы позволить людям попробовать с моего собственного сайта (одно отличие от других редакторов заключается в том, что мой вывод будет состоять из холста, а не из фрейма HTML). Не желая изобретать колесо, существуют ли способы создания возможности "Попробуйте сами", которые учитывают такие проблемы, как уязвимости на основе DOM-скриптов?

Ответ 1

Простой дизайн будет начальной страницей с form, содержащей три textarea и один iframe. textarea содержит части html/css и javascript, а iframe содержит результат:

<!--index.html-->
<html>
<form method="post" action="tryit-result.php" target="result">
<button>Try it</button>
<table>
    <tr>
        <td><textarea name="html"></textarea></td>
        <td><textarea name="css"></textarea></td>
    </tr>
    <tr>
        <td><textarea name="js"></textarea></td>
        <td><iframe src="tryit-result.php" name="result"></iframe></td>
    </tr>
</table>
</form>
</html>

Затем отправитель обрабатывается на сервере, сохраняя файлы html/css/scripts в файл и затем возвращая страницу, которая ссылается на эти файлы, что-то в строке:

<!--tryit-result.php-->
<html>
<head>
    <style type='text/css'>
        <?php echo file_get_contents('css contents')?>
    </style>
    <script type='text/javascript'>
    $(function() {
        <?php echo file_get_contents('js contents')?>
    });
    </script>
</head>
<body>
    <?php echo file_get_contents('html contents')?>
</body>
</html>

Ответ 2

Создайте простую страницу html с textarea и iframe:

<html>
  <head>
<script type="text/javascript">
function data_submit()
{
document.form1.txt_data.value= document.form1.txt_html.value;
 }
</script>

  <title>Try It yourself Online Editor</title>
 </head>
  <body>
  <form name="form1" id="form1" method="post" action="" >
 <table width="100%" cellspacing="0" cellpadding="0" border="1">
    <tr >

     <td>
 <input type="submit" name="bt_submit" value="Click to Execute " align="top" onClick="data_submit();"/>
</td>
      <td align="center">Output</td>
    </tr>
      <tr>
        <td width="50%" >
      <input type="text"  name="txt_data" value="" style="visibility:hidden;" />

        <textarea rows="35" width="90px" height="550px" cols="77" name="txt_html">

    </textarea>
          </td>
        <td width="50%" style="border-width:10px;border-style:none;">
          <iframe height="550px" width="100%" src="try_it.php" name="iframe_a"></iframe>
         </td>
    </table>
  </form>
  </body>
  </html>

Теперь код, написанный пользователем, должен отображаться в iframe, поэтому нам нужно сохранить код в файле. Напишите PHP-код для создания файла. Ниже приведен код создания файла.

  if(isset($_POST['bt_submit']))
 {
 $file = "try_it.php";
 $fp = fopen($file, 'w');
 //Following code will store the content in textarea in a variable which will create a file.
 $content = $_POST['txt_data'];
 fwrite($fp, $content);
  fclose($fp);
  }
 ?>

Следующий код php записывается для отображения вывода по умолчанию и изменения вывода после нажатия кнопки отправки пользователем.

<?php


 if(isset($_POST['bt_submit']))
 {
 echo trim($content);
  }
  else
  {
  echo "<html>\n";
echo "<body>\n";


echo "<h1>Hello World!!!</h1>\n";


echo "</body>\n";
echo "</html>\n";
 } ?>

Теперь соедините весь код, и вы попробуете его самостоятельно.

Ответ 3

Для этого не требуется всего 2 файла, это можно сделать очень легко: Для простоты я просто создаю одно текстовое поле, но вы можете создать 3 textarea, если хотите и добавить префиксы, такие как <style> или <script> и т.д.

<body>
  <textarea id="code" oninput="putcode(this.value)">
  </textarea>
  <iframe frameborder="0"></iframe>
  <script>
    var val;
    function putcode(val){
      document.querySelector("iframe").srcdoc=val;
    }
  </script>
</body>

Вы можете добавить еще один код css, чтобы сделать его более красивым, но это довольно простая версия того, что я пытаюсь объяснить. И нет необходимости беспокоиться о безопасности, поскольку это абсолютно безопасно.