Home/ Questions/Q 7051501
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-28T03:16:16+00:00

I know there are a number of Try It Yourself JavaScript editors, such as

  • 0

I know there are a number of “Try It Yourself” JavaScript editors, such as W3School’s Try It editor, JSBin, and JSFiddle.

I’m developing a graphical JavaScript library that I’d like to let people try out from my own site (one difference from other editors is that my output would be to a canvas, not an HTML frame). Not wanting to reinvent the wheel, are there established ways for creating a “Try It Yourself” capability that consider issues like DOM-based scripting vulnerabilities?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    A simple design would be a start page with a form containing three textarea‘s and one iframe. The textarea‘s contain the html/css and javascript parts, and the iframe contains the result:

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

    The submit is then handled at the server by saving the html/css/scripts to file and then returning a page that references these files, something in the line of:

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