Thread:Mathmagician/@comment-3562424-20130813184758/@comment-4674838-20130816053734

Okay, so this is pretty complicated once you get into the specifics, but I'll try to start off simple.

Intro
An iframe is an HTML element that is used to embed a webpage inside a webpage. Our goal here is to use the embedded webpage ("Server") to emulate a server. We will have a main window ("Client") that has an iframe with the embedded Server webpage.
 * 1) The Client will send requests to the Server,
 * 2) the Server will process them,
 * 3) and (optionally) the Server will send data back to the Client

Example
For this example, I will be using the following 2 pages as Client and Server, respectively:
 * Server
 * Click the "appendNum" and "eraseNum" buttons a few times to get an idea of the basic input-output for this example.
 * Client
 * Here you can see the Server is embedded as an iframe! If you click the "massAppend" or "massErase" buttons, a message is sent to the iframe, the iframe processes it and does stuff.

Walkthrough of a single transaction
Step 1: clicking the massAppend button posts a message to the iframe, with the data string "massAppend".

Step 2: Look at the source code for the Server page. Specifically, look for the  function in the JavaScript. This is a custom event handler that looks for messages sent to the Server and processes them.


 * Important Observation: Functions don't operate as event handlers all on their own. You have to attach them to the event you want. In this case, we attach the function to the "messsage" event (do this as soon as the iframe onloads):

Step 3: The server actually does send a message back to the client: "We processed your request!". However, because the Client isn't set up to receive messages from the Server, this message is ignored. If you want 2-way communication, the Client also needs its own custom event handler &mdash; set up exactly the same way as the Server's.

Documentation: https://developer.mozilla.org/en-US/docs/Web/API/window.postMessage