Talking Across Domains

24 Talking Across Domains

Client-side web applications have always been restricted from talking directly to scripts on other domains, a restriction designed to protect

users. 5 There are numerous clever ways around this restriction, includ- ing the use of server-side proxies and clever URL hacks. But now there’s

a better way. The HTML5 specification introduced Cross-document Messaging, an API

that makes it possible for scripts hosted on different domains to pass messages back and forth. For example, we can have a form on http:// support.awesomecompany.com post content to another window or iframe whose content is hosted on http://www.awesomecompany.com . It turns out that for our current project, we need to do just that.

AwesomeCo’s new support site will have a contact form, and the sup- port manager wants to list all the support contacts and their email addresses next to the contact form. The support contacts will eventu- ally come from a content management system on another server, so we can 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 web servers to prop- erly test everything on your own setup. The examples we’re working on here don’t work in every browser unless we use a server. See the sidebar on the following page for more on this.

The Contact List We’ll create the contact list first. Our basic markup will look like this:

Download html5xdomain/contactlist/public/index.html

<ul id="contacts"> <li> <h2> Sales </h2> <p class="name"> James Norris </p> <p class="email"> j.norris@awesomeco.com </p>

</li>

5. This is known as the Same Origin Policy and is explained more at https://developer.mozilla.org/en/Same_origin_policy_for_JavaScript .

T ALKING A CROSS D OMAINS 201

Simple Web Servers If you don’t want to go through the trouble of configuring

Apache instances or setting up your own servers, you can use the simple Ruby-based servers included in the book’s example code files. For instructions on getting Ruby working on your sys- tem, see the file RUBY_README.txt within the book’s source code files.

To start the servers, first go into the html5xdomain/contactlist and run the server.rb file like this:

ruby server.rb It will start on port 4567. You can then do the same for the

server.rb in html5xdomain/supportpage , which will start on port 3000. You can edit the port for each of these by editing the server.rb file.

<li> <h2> Operations </h2> <p class="name"> Tony Raymond </p> <p class="email"> t.raymond@awesomeco.com </p>

</li> <li>

<h2> Accounts Payable </h2> <p class="name"> Clark Greenwood </p> <p class="email"> c.greenwood@awesomeco.com </p>

</li> <li>

<h2> Accounts Receivable </h2> <p class="name"> Herbert Whitmore </p> <p class="email"> h.whitmore@awesomeco.com </p>

</li> </ul>

On that page, we’ll also load both the jQuery library and our own cus- tom application.js file and a simple style sheet. We’ll place this in our head section:

Download html5xdomain/contactlist/public/index.html

<script type= "text/javascript" charset= "utf-8" src= "http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" >

</script>

T ALKING A CROSS D OMAINS 202

<script type= "text/javascript" src= "javascripts/application.js" > </script> <link rel="stylesheet" href="style.css" type="text/css" media="screen">

The style sheet for the contact list looks like this:

Download html5xdomain/contactlist/public/style.css

ul{ list-style: none; }

ul h2, ul p{margin: 0;} ul li{margin-bottom: 20px;}

It’s just a couple of small tweaks to make the list look a little cleaner. Posting the Message

When a user clicks an entry in our contact list, we’ll grab the email from the list item and post a message back to the parent window. The postMessage ( ) method takes two parameters: the message itself and the target window’s origin. Here’s how the entire event handler looks:

Download html5xdomain/contactlist/public/javascripts/application.js

$(function(){ $( "#contacts li" ).click(function(event){ var email = ($(this).find( ".email" ).html()); var origin = "http://192.168.1.244:3000/index.html" ;

window.parent.postMessage(email, origin); }); });

You’ll need to change the origin if you’re following along, since it has to match the URL of the parent window. 6

Now we need to implement the page that will hold this frame and receive its messages.