Code Processing (Client Side instead of on Server)

Question

I want generate a development tool that I can input code (Such as HTML, CSS and JS) and it will create a preview/result window (like JSFiddle). I will be using it for tutorials in school and need a unique site to do this from (I would love to use CodePen, JS Fiddle or Codecademy... But I can't).

I am able to generate a form that can be processed and shown in an iframe (through PHP where it simply echos the information into a new html file that is shown in the iframe). But this came with problems; I only have a cheap server and won't want to put too much pressure on it so need todo this through JS/jQuery.

Firstly is this possible? And how would I go about doing it (code examples would be great!)?

Thanks in advance (I appologise if I haven't given enough detail but I'm fairly new to this and may just be asking a pointless question (I'm only 15 :/ ) )

Cheers :)

Answer 1

There is a rather impressive project called php.js that will let you parse and execute a subset of PHP code in the browser.

Answer 2

If you want to do it complete on a client/ in browser like jsfiddel do, then you need 2 or more frames. One is for your code and one is for the output.

If you click on "run", then need to apply your code to the frame. You can do this by accessing the document object of the frame. If you got it, you´ll need to inject your code there. There many examples in the web on how to access a child document object from an frame/iframe.