Web Sandbox est un projet réalisé par un étudiant donc le
code source est simple et peu sécurisé.
Le principe de fonctionnement est simple, on a plusieurs
sections (HTML, CSS, JavaScript) dans le code source du site
que l'on poura modifier selon la valeur d'une zone de text.
Tout d'abord, on définit à l'aide d'une variable le code que
l'on modifie (HTML, CSS, JavaScript) et on prend le code
innerHTML de la section correspondante pour le donner
comme valeur au textarea.
Ensuite, on utilise l'attribut onChange de la zone de
text pour associer à chaque changement l'exécution d'une
fonction JS qui selon le code modifié (identifié par la variable)
remplace l'innerHTML de la section correspondante.
Mais cette façon de faire comporte des défauts, par exemple dans
le code CSS si vous ne précisez pas que le style que vous définissez
est uniquement celui des éléments présents dans la section
#outputSection alors le style peut s'appliquer aux éléments
du site lui-même.