Peter Lubbers - Pro HTML 5 Programming

CHAPTER 5 ■ USING THE COMMUNICATION APIS
■ Note You must restart your browser after modifying the host file to ensure the DNS entries take effect.
2. Install Python, which includes the lightweight SimpleHTTPServer web server, if
you did not do so for the previous example.
3. Navigate to the directory that contains the example file
(crossOrignUpload.html) and the Python CORS server script (CORSServer.py).
4. Start Python in this directory as follows:
python CORSServer.py 9999
5. Open a browser and navigate to
http://portal.example.com:9999/crossOriginUpload.html. You should now
see the page shown in Figure 5.5.
Practical Extras
Sometimes there are techniques that don’t fit into our regular examples, but that nonetheless apply to
many types of HTML5 applications. We present to you some short, but common, practical extras here.
Structured Data
Early versions of postMessage only supported strings. Later revisions allowed other types of data
including JavaScript objects, canvas imageData, and files. Support for different object types will vary by
browser as the specification develops.
In some browsers, the limitations on JavaScript objects that can be sent with postMessage are the
same as those for JSON data. In particular, data structures with cycles may not be allowed. An example
of this is a list containing itself.
Framebusting
Framebusting is a technique for ensuring that your content is not loaded in an iframe. An application
can detect that its window is not the outermost window (window.top) and subsequently break out of its
containing frame, as shown in the following example.
if (window !== window.top) {
window.top.location = location;
}
However, there may be certain partner pages that you want to allow to frame your content. One
solution is to use postMessage to handshake between cooperating iframes and containing pages, as
shown in the Listing 5-11.
135