The support contacts will eventually come from a content-management system
on another server, so for this prototype we’ll embed the contact list alongside
the form using an <iframe>. The catch is that the support manager would love
it if we could let users click a name from the contact list and have the email
automatically added to our form.We can do this quite easily, but you’ll need to use two web servers to properly
test everything on your own setup. The examples we’re working on here don’t
function in every browser unless we serve the pages from a server. At the very
least, you’ll need to have the contact-list application on one port and the
support site on another port so you can prove that cross-document messaging
really does work. The downloadable example code for the book has a simple
script you can use to fire up web servers for this recipe. It requires Node.js,
but you can refer back to Node.js and the Example Server, on page xv, for
details on how to set that up and start this server. For this recipe, the example
code will use the URLs and ports of this server:- The contact list will be served from localhost:4000.
- The support page list will be served from localhost:3000.
If you’re going to follow along and place your files on separate servers that
you control, just change the URLs in the code.The Contact List
We’ll create the contact list first. This is the file that will be embedded in the
support site’s <iframe> and will send messages to the support site. Our basic
markup will look like this:html5_cross_document/contactlist/index.html
<!DOCTYPEhtml>
<htmllang="en-US">
<head>
<metacharset="utf-8">
<title>ContactList</title>
<linkrel="stylesheet"href="stylesheets/style.css" >
</head>
<body>
<ulid="contacts">
<li>
<h2>Sales</h2>
<pclass="name">JamesNorris</p>
<pclass="email">[email protected]</p>
</li>
<li>
<h2>Operations</h2>
<pclass="name">TonyRaymond</p>Chapter 10. Creating Interactive Web Applications • 214
Download from Wow! eBook <www.wowebook.com> report erratum • discuss